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:
Reduce the value of
@navbar-height
to44px
, and then apply the variables we set earlier where they fit here. Change@navbar-default-color
to@text-color
and@navbar-default-bg
to@white
.// Basics of a navbar @navbar-height: 44px; ... @navbar-default-color: @text-color; @navbar-default-bg: ...