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:
On smaller screens, we'll display icons at the far right of the collapsed navbar:
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:
utility-nav
is simply created for our use. It is not a Bootstrap specific class and has no specific styles attached.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:
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:
_banner.less
, and save it directly within the less
folder, alongside our other custom LESS files._banner.less
to the import sequence in __main.less
.// Other custom files
@import "_banner.less"; // added
_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; } }
.banner-brand
class.container
to relative
so that it will contain our absolute-positioned utility-nav
class.inline-block
links and add padding.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:
That takes care of medium viewports and larger. Now, let's address the needs of the collapsed responsive navbar.