Making responsive adjustments

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:

1. Open less/_navbar.less in your editor.

2. 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...