How it works…

In step 1, we import the recipe-specific SCSS file from our main.scss. In step 2, we add the SCSS code that will style the navbar. The class is using the button-outline-variant mixin to create custom css. First, we specify that we will use no border on .secondary-nav and that its font size should be smaller than the font size of the main nav links. Next, we increase the padding between nav links on the main nav, increase their font size, and add a solid border-bottom to each main navigation item on hover. Note that the color of the border-bottom for links is initially set to transparent. Then, we just change the color on hover. Alternatively, we could have used changes in opacity to achieve the same effect.

In order for the ...

Get Bootstrap 4 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.