Sticky navbar

Navigation is a key element of any website. However, this is a very complex element and creating a good navigation is a real art.

In this lesson, we'll learn how to create a navbar that all the time remains visible at the top of the screen when scrolling down the page, so that the user has easy access to it at all times.

This is not always the optimal solution, but in our case it will be desirable.

Step 1 - add basic navbar

Go to the navbar documentation page and copy HTML code of the Basic example. Then paste it just below opening <header> tag:

(We have learned basics about navbars in the previous tutorial, so I won't dwell on it here)

Step 2 - change the content of the navbar

Instead of the default elements in the basic example navbar, let's add some of our own. On the left there will be regular links, and on the right social media icons. Let's also remove the MDB logo together with the navbar-brand element, because in a future lesson we will create a new custom logo:

Step 3 - stick the navbar to the top edge

Creating sticky navbar in Bootstrap is easy. Simply add fixed-top class to the navbar:

And now it sticks to the top, even when scrolling.

Fixed top is not the only option. Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM.