69236

Bootstrap V4 collapsible Navbar alignment

Question:

I got a question about BS4 and the alignment of a collapsible Menu.

Here is the Code I got:

<nav class="navbar navbar-light navbar-fixed-top"> <div class="container"> <button type="button" class="navbar-toggler hidden-sm-up pull-xs-right" data-toggle="collapse" data-target=".nav-content"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Test</a> <div class="collapse navbar-toggleable-xs nav-content"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Leagues</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li> </ul> </div> </div> </nav>

<a href="https://i.stack.imgur.com/V7SAl.png" rel="nofollow">Basic without</a>

The Problem is, that I want to have the Menu Items (when not collapsed) aligned to the right and when collapsed, to the left side but below the Hamburger Button and the main nav. It worked fine with BS 3.

I've tried it with float-xs-right, but the it still doesn't work properly.

<a href="https://i.stack.imgur.com/HnuL0.png" rel="nofollow">With float right</a>

Kind regards, Chris

Answer1:

Depending on which version you're using of Bootstrap 4, the syntax has changed to float-**-right (See <a href="https://v4-alpha.getbootstrap.com/utilities/responsive-helpers/#responsive-floats" rel="nofollow">Responsive floats</a>) as of the current v4.0.0-alpha.5, see this post under <a href="https://blog.getbootstrap.com/2016/10/19/bootstrap-4-alpha-5/" rel="nofollow">Utilities overhaul</a>.

Another issue is when using a Responsive (float) utility against the navbar-toggler button, the list items will appear next the the navbar-brand instead of below it. As of right now I believe you have to handle this yourself by clearing the float within the correct breakpoint for your collapse.

<strong>Example CSS:</strong>

@media (max-width: 574px) { .navbar-header:after, .navbar-header:before { display: table; content: " " } .navbar-header:after { clear: both } }

<strong>Working Example:</strong>

<pre class="snippet-code-css lang-css prettyprint-override">@media (max-width: 574px) { .navbar-header:after, .navbar-header:before { display: table; content: " " } .navbar-header:after { clear: both } } <pre class="snippet-code-html lang-html prettyprint-override"><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> <nav class="navbar navbar-light navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">BRAND</a> <button class="navbar-toggler hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"></button> </div> <div class="collapse navbar-toggleable-xs" id="nav-content"> <ul class="nav navbar-nav float-sm-right"> <li class="nav-item"> <a class="nav-link" href="#">ABOUT</a> </li> <li class="nav-item"> <a class="nav-link" href="#">BLOG</a> </li> <li class="nav-item"> <a class="nav-link" href="#">LOGIN</a> </li> <li class="nav-item"> <a class="nav-link" href="#">SIGN UP FREE</a> </li> </ul> </div> </div> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

Recommend

  • ActiveAndroid Pre populate table using schema migration
  • Filter realm objects based on counting list
  • Bootstrap 4 - Sticky Navbar with fixed margin
  • Squash League Results - SQL Query
  • Slickgrid grouping expand/collapse strange behaviour
  • How to add jsf or html tags to p:panel 's header
  • Image loaded from Isolated storage are not binding at all
  • Calling Handlebars {{render}} with a variable name
  • Sustain dropdown on row while table refreshes
  • Bootstrap 4 - Center List
  • keydown event triggered only once
  • ember js subviews and didinsertelement event
  • Stalling at deallocate
  • Touch events over two dom elements?
  • JQuery Add class to certain list item
  • Collapsible Sankey Diagram - D3
  • ng-repeat not working with table but works with list
  • Function JavaScript : on Menu CSS HTML
  • Can't delete li from to-do list
  • Why isn't my “Fizz Buzz” test in R working?
  • Python PIL to extract number from image
  • Installing Perl6 and Panda on Ubuntu 15.10. Problems with bootstrap.pl
  • Can my PDF ping my server when it is opened?
  • CodeIgniter URI Parameter is partially bypassing an “if” statement
  • opencv display image without x server
  • Android full screen on only one activity?
  • Django rest serializer Breaks when data exists
  • Recording logins for password protected directories
  • Using jQuery closest() method with class selector
  • Is there any way to access browser form field suggestions from JavaScript?
  • Accessing IRQ description array within a module and displaying action names
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • ORA-29908: missing primary invocation for ancillary operator
  • Jquery - Jquery Wysiwyg return html as a string
  • php design question - will a Helper help here?
  • Getting error when using KSoap library to consume .NET web services
  • Observable and ngFor in Angular 2
  • Converting MP3 duration time
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How do I use LINQ to get all the Items that have a particular SubItem?