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
Post a Comment