You can also change the color scheme of the navbar by using the .navbar-light for the light background colors, or .navbar-dark for the dark background colors. Then, customize it with the background color utility classes, such as .bg-dark, .bg-primary, and so on.
Alternatively, you can also apply the CSS background-color property on the .navbar element yourself to customize the navbar theme, as shown in the following example:
Example
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #ddeeff;">
<!-- Navbar content -->
</nav>— The output of the above example will look something like this:
Bootstrap Fixed Navbars
Bootstrap also provides mechanism to create navbar that is fixed to the top, fixed to the bottom, or stickied to the top (i.e. scrolls with the page until it reaches the top, then stays there).
Navbar Fixed to the Top
Apply the position utility class .fixed-top to the .navbar element to fix the navbar at the top of the viewport, so that it won’t scroll with the page. Here’s an example:
Example
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar content -->
</nav>Navbar Fixed to the Bottom
Similarly, add the class .fixed-bottom to the .navbar element to fix the navbar at the bottom of the viewport. It also won’t scroll with the page. Let’s see how it works:
Example
<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar content -->
</nav>Navbar Stickied to the Top
You can also create sticky top navbar that scrolls with the page until it reaches the top, then stays there, by simply using the .sticky-top class on the .navbar element, like this:
Example
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar content -->
</nav>Note: Remember to add padding (at least 70px) to the top or bottom of the <body> element to prevent the content to go underneath the navbar while implementing the fixed top or fixed bottom navbar. Also, be sure to add your custom style sheet after the Bootstrap’s CSS file, otherwise style rules in your style sheet may be overridden by the Bootstrap’s one.
Tip: Place .navbar content inside the .container, .container-fluid or .container{-sm|-md|-lg|-xl|-xxl} for proper padding and alignment with the rest of the content.