jquery - Bootstrap 3.3.x, how to get correct order of menu items for navbar when collapsed? -


bootstrap newbie using 3.3.6, , having trouble creating simple navbar based on example twitter provides in documentation. code show below sets navbar has 2 menu items on top right corner. large screens, looks like:

brand menu 1 menu 2

but when collapse navbar smallest screen, shows:

brand menu 2 menu 1

how collapsed order be:

brand menu 1 menu 2

?

<nav class="navbar navbar-default navbar-static-top navbar-default-siteheader navbar-inner-siteheader">     <div class="container-fluid">         <!-- brand , toggle grouped better mobile display -->         <div class="navbar-header" >             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>          <!-- collect nav links, forms, , other content toggling -->         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">             <ul class="nav navbar-nav navbar-right">                 <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown"                       role="button" aria-haspopup="true" aria-expanded="false">menu 2<span class="caret"></span></a>                     <ul class="dropdown-menu">                         <li><a href="#">item 1</a></li>                         <li><a href="#">item 2</a></li>                         <li><a href="#">item 3</a></li>                     </ul>                 </li>             </ul>                    <ul class="nav navbar-nav navbar-right">                 <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown"                      role="button" aria-haspopup="true" aria-expanded="false">menu 1<span class="caret"></span></a>                     <ul class="dropdown-menu">                         <li><a href="#">item a</a></li>                         <li><a href="#">item b</a></li>                         <li><a href="#">item c</a></li>                     </ul>                 </li>             </ul>          </div>  <!-- /.navbar-collapse -->     </div> <!-- /.container --> </nav> 

if want 2 dropdown menus on right, don't have create 2 navbar-right.

just put 2 <li class="dropdown"> single <ul class="nav navbar-nav navbar-right">.

like :

<nav class="navbar navbar-default navbar-static-top navbar-default-siteheader navbar-inner-siteheader">     <div class="container-fluid">         <!-- brand , toggle grouped better mobile display -->         <div class="navbar-header" >             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>          <!-- collect nav links, forms, , other content toggling -->         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">              <ul class="nav navbar-nav navbar-right">                 <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown"                      role="button" aria-haspopup="true" aria-expanded="false">menu 1<span class="caret"></span></a>                     <ul class="dropdown-menu">                         <li><a href="#">item a</a></li>                         <li><a href="#">item b</a></li>                         <li><a href="#">item c</a></li>                     </ul>                 </li>                 <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown"                       role="button" aria-haspopup="true" aria-expanded="false">menu 2<span class="caret"></span></a>                     <ul class="dropdown-menu">                         <li><a href="#">item 1</a></li>                         <li><a href="#">item 2</a></li>                         <li><a href="#">item 3</a></li>                     </ul>                 </li>              </ul>          </div>  <!-- /.navbar-collapse -->     </div> <!-- /.container --> </nav> 

here's jsfiddle : demo


Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -