-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Bootstrap Site Blueprints

Our utility-nav
class runs into problems when the navbar collapses for small screens. The most immediate problem is that it disappears:
We can make our utility-nav
class visible again by assigning it a z-index
value greater than that of the navbar's, which is set to 1000
by a variable in _variables.less
. In _banner.less
, set the z-index
property of .utility-nav
to 1999
.
.utility-nav { ... z-index: 1999;
This will bring our utility navigation back to the foreground as seen in the following screenshot:
Now the problem is that it overlaps our navbar-toggle
button. We need to move the toggle to the left side of our navbar. This can be done as follows:
Open less/_navbar.less
in your editor.
Search for the comment // Navbar toggle
. We'll edit the lines within the .navbar-toggle
selector immediately beneath this comment, changing the float
value from right
to left
and margin-right
to margin-left
:
.navbar-toggle { position: relative; float: left; // edited margin...