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