Styling the horizontal navbar

When you move your mouse over the navbar links, you'll find that the hover background color of the link is smaller than the height of the navbar:

You can solve this issue by applying padding on the links instead of the navbar. Use the following SCSS code in the file to change the padding:

.navbar {
  @include media-breakpoint-up(md) {
    padding-top: 0;
    padding-bottom: 0;
  }
  .nav-link
  {
    padding: $spacer;
    @include media-breakpoint-only(md) {
      padding: $spacer-y ($spacer-x / 2);
    } 
  }
}  

Now your navbar links should look like the following screenshot:

And finally, let's transform the text to upper case, reduce its size a bit, and make it bold. In _navbar.scss, add these highlighted lines:

  .nav-link 
  { 
    padding: $spacer; 
    @include media-breakpoint-up(md) { 
     text-transform: uppercase; 
     font-size: 82%; 
     font-weight: bold; &...