O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Styling the horizontal 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required