Styling the collapsed navbar

While still in _navbar.less, search for // Navbar, which will take you to the navbar variables. Note that most of the standard values specified here will affect both the collapsed responsive navbar for small viewports and the expanded navbar for wider viewports.

We want the background, text, and link colors for the collapsed responsive navbar to remain largely consistent with the default values but then change to our blue background and a light text color for medium and larger viewports.

We'll develop a responsive color scheme to accomplish the preceding color changes based on the viewport.

Open the scss/includes/_navbar.scss file and edit the default values for the small viewport as follows:

// responsive color scheme 
.navbar { 
  background-color: $navbar-xs-bg; 
  color: $navbar-xs-color; 
   
  .nav-link 
  { 
    @include hover-focus-active { 
      background-color: $navbar-xs-hover-bg; 
    } 
  } 
}...