css - Bootstrap 3 secondary menu using nav-pills below navbar -


i'm using bootstrap 3 , know if it's possible add secondary menu using nav-pills, want behave secondary navbar.

https://www.youtube.com/watch?v=0hquzxy252m

my menu code html:

<div class="row">   <div class="col-md-12">     <ul class="nav nav-pills">       <li ng-class="{active: routebeginswith('/admin/users')}"><a href="#/admin/users"><span class="glyphicon glyphicon-user"></span> user management</a></li>       <li ng-class="{active: routebeginswith('/admin/sites')}"><a href="#/admin/sites"><span class="glyphicon glyphicon-globe"></span> site management</a></li>       <li ng-class="{active: routebeginswith('/admin/email')}"><a href="#/admin/email"><span class="glyphicon glyphicon-envelope"></span> email settings</a></li>     </ul>   </div> </div> 

you put nav-pills in container, , position:fixed container right below primary nav. however, simple approach here falls apart on mobile. you'll need solution (or more complex css) if want work on mobile too.

.nav-2{   position:fixed;   top:50px;   left:0px;   width:100%;   background:#eee; } 

example: http://www.bootply.com/i4e9jzllnt#

edit: fixed mobile

as long use responsive primary nav, , correct margins , padding on pill container, works ok on mobile too: http://www.bootply.com/ozq7no6h2o

.nav-2{   position:fixed;   top:50px;   left:0px;   width:100%;   background:#eee;   padding-top:10px;   padding-bottom:10px;   z-index:2; } 

(confirmed addition of z-index:2 fixed final problem; after discussion in chat)


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -