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

On medium, large, and extra-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:

Notice that the collapsed navbar has a different color scheme; we'll discuss how to do this later on.

Now let's set the navbar changes up.

First, to give the logo a little more space in the the scss/includes/_header.scss file, set top-padding for only the larger viewports, as follows:

header[role="banner"] { 
  .navbar-brand { 
    > img { 
      width: 120px; 
      padding-left: $spacer-x; 
      @include media-breakpoint-up(md) { 
        padding-top: $spacer-y * 3; 
        padding-left: 0; 
        width: 180px; 
      } 
    } 
  } 

Then, still working in the html/includes/header...