Bootstrap Site Blueprints

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.

Let's check and adjust a few values for the default variables and then create a new set of variables to apply only to the expanded navbar, as follows:

1. Reduce the value of @navbar-height to 44px, and then apply the variables we set earlier ...