Book Image

Bootstrap Site Blueprints

Book Image

Bootstrap Site Blueprints

Overview of this book

Table of Contents (16 chapters)
Bootstrap Site Blueprints
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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 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:           ...