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="index.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...