Making a transparent navbar on a darker background

In this recipe, we continue using a customized version of the navbar used on the official Bootstrap 4 website. This recipe will result in a completely different look based on the HTML structure that is almost the same as in the previous recipes in this chapter. To achieve this, we will be relying heavily on SCSS.

Getting ready

To get ready for this recipe, search for the scss folder inside the bower_components/bootstrap folder. We will take some bits and pieces from the code in this folder and override its behavior to get the desired effect.

How to do it…

1. Open chapter5/start/main.scss and comment out all the @import statements except the one that pertains to this recipe:

@import "./bower_components/bootstrap/scss/bootstrap.scss";
@import "./bower_components/bootstrap/scss/_mixins.scss";
@import "./bower_components/font-awesome/scss/font-awesome.scss";
@import "./bower_components/hover/scss/hover.scss";

// @import "recipe05-01.scss";
// @import...