Adding utility navigation

This project requires utility navigation to allow users to log in or register and to view their carts.

On medium and large viewports, we'll place this utility navigation in the very top-right corner of our banner area as follows:

Adding utility navigation

On smaller screens, we'll display icons at the far right of the collapsed navbar:

Adding utility navigation

Let's set this up.

Still working in index.html, we need to add the markup for our utility navigation within the banner, just after the banner-brand attribute. Here is the full markup, beginning with the opening header tag for our banner area. I've highlighted the new utility-nav markup in the following code snippet:

<header role="banner">
  <div class="container">
    <a class="banner-brand visible-md visible-lg" href="EB9781782164524_3.html"><img src="img/logo.png" alt="Bootstrappin'" width="180"></a>
    <div class="utility-nav">
      <ul>
        <li><a href="#" title="Login or Register"><i class="icon 
fa fa-user fa-lg"></i> Log In or Register</a></li>
        <li><a href="#" title="View Cart"><i class="icon fa fa-
shopping-cart fa-lg"></i> View Cart</a></li>
      </ul>
    </div><!-- /.utility-nav -->
  </div><!-- /.container -->

Note a few things about this markup:

  • The class utility-nav is simply created for our use. It is not a Bootstrap specific class and has no specific styles attached.
  • I've included Font Awesome's user and shopping cart icons and added the class of fa-lg to increase their size by 33 percent. See Font Awesome's documentation on this at http://fontawesome.io/examples/#larger.

Save the changes and refresh the page, and you should see our new utility-nav class appear just below the banner-brand logo as follows:

Adding utility navigation

Now, to complete the layout and related adjustments, we need to apply some custom styles. We need a new file to manage styles for our banner area. This can be accomplished as follows:

  1. Create a new file, _banner.less, and save it directly within the less folder, alongside our other custom LESS files.
    Adding utility navigation
  2. Add _banner.less to the import sequence in __main.less.
    // Other custom files
@import "_banner.less"; // added
  3. In _banner.less, provide a helpful comment at the top. We need to set the position of .utility-nav to absolute, at the top right. We'll specify header[role="banner"] as the context for these styles.
    //// Banner Area Styles
//
header[role="banner"] {
  .utility-nav {
    position: absolute;
    top: 0;
    right: 0;
  }
}
  4. Now, let's refine the details as follows:
    1. Increase the height of our banner area by adding top padding to the .banner-brand class.
    2. Set the positioning of the banner container to relative so that it will contain our absolute-positioned utility-nav class.
    3. Remove bullets from the unordered list.
    4. Float the list items on the left.
    5. Display the inline-block links and add padding.
    6. Remove underlines from the hover effect.

    The following lines will accomplish these goals:

    header[role="banner"] {
  .banner-brand {
    padding-top: 40px;
  }
  > .container {
    position: relative;
  }
  .utility-nav {
    position: absolute;
    top: 0;
    right: 0;
    > ul {
      list-style: none;
      > li {
        float: left;
        > a {
          display: inline-block;
          padding: 8px 12px;
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
}

Save the changes and ensure that it compiles. Make sure your browser window is at desktop width. Refresh it. You should see your utility-nav class take its place at the top right of the banner:

Adding utility navigation

That takes care of medium viewports and larger. Now, let's address the needs of the collapsed responsive navbar.

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

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