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:

Making responsive adjustments

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:

Making responsive adjustments

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-left: @navbar-padding-horizontal; // edited

Save and compile these changes, and you'll see the navbar toggle shift to the left end of the collapsed navbar, as shown in the following screenshot:

Making responsive adjustments

So far so good.

Now to address the problem of crowding by hiding the text for all devices except for screen readers on the collapsed navbar. In an uncluttered collapsed navbar, the icons will be enough to communicate the point, especially if we make the icons larger. Let's do that:

  1. In index.html, place span tags around the text within each link of our utility-nav class as follows:
    <li><a href="#" title="Login or Register"><i class="icon fa fa-user fa-lg"></i> <span>Log In or Register</span></a></li>
<li><a href="#" title="View Cart"><i class="icon fa fa-shopping-cart fa-lg"></i> <span>View Cart</span></a></li>

    This will give us a handle for our upcoming style adjustment.

  2. Now, in _banner.less, we'll add a media query to target these span tags. Thanks to the power of LESS, we can nest the media query precisely where we want it to do its work. We'll use the @grid-float-breakpoint variable, setting a max-width query to the @grid-float-breakpoint value minus one, since this variable determines the point at which our navbar makes the transition from collapsed to expanded. Within this media query, we'll use the utility class sr-only as a mixin to hide text from all devices except screen readers. (See the documentation on this class at http://getbootstrap.com/css/#helper-classes-screen-readers.) Here is the code snippet:
    .utility-nav {
  ...
  ...
  > a {
    ...
    @media (max-width: (@grid-float-breakpoint - 1)) {
      span {
      .sr-only();
      }
    }
  }
}

    This will hide the text between our span tags, leaving us only with the icons!

  3. Now, we will increase the size of the icons and add some line height to position them vertically. We'll do this within the same media query:
    @media (max-width: @grid-float-breakpoint) {
  span {
    .sr-only();
  }
  .icon {
    font-size: 2em;
    line-height: 1.2;
  }
}

Save, compile, and refresh; you should see the following result:

Making responsive adjustments

Take a minute to resize your browser window back and forth across the breakpoint. You should see the entire banner and navbar adjust seamlessly across the breakpoint.

If you're like me, it's hard not to be pleased with a framework that enables us to be this efficient at building such an adept and responsive interface.

Next up, we need to begin implementing the color scheme.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset