0

How can I simply change the order of the navbar header list elements without changing the order in the toggle navigation menu. Like this sample image

My Code Is:

<nav class="navbar navbar-inverse">
<div class="container-fluid"> 
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#inverseNavbar1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a></div>

<div class="collapse navbar-collapse" id="inverseNavbar1">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</div>

Rob
  • 14,746
  • 28
  • 47
  • 65
spilet
  • 5
  • 5
  • Though this may not be a great solution for you, this is somewhat of a duplicate question - http://stackoverflow.com/questions/23875090/changing-menu-order-on-collapsed-navbar-in-bootstrap-3. – Tricky12 Apr 21 '16 at 19:09

1 Answers1

0

There isn't really a good way to re-order the menu items. However, in your example you can add a float: right to Link1 when the screen is larger than 768px (Bootstrap's breakpoint for the mobile toggle menu).

Demo Here

<li class="float-right"><a href="#">Link 1</a></li>

@media(min-width: 768px) {
    .navbar .navbar-nav .float-right {
        float: right;
    }
}

NOTE - This solution is specific to your example. It would be tough using float to completely re-order all of your links.

Tricky12
  • 6,752
  • 1
  • 27
  • 35