Placement

The default position of MegaNavbar is static, but you can place MegaNavbar 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 and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Sticky

The MegaNavbar BS4 is positioned based on the user's scroll position


A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Also note that .sticky-top uses position: sticky, which isn´t fully supported in every browser.

<nav class="navbar sticky-top...">
  ...
</nav>

Fixed to the top

For make a navigation menu fixed on top of the window, just add .fixed-top.

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

.body { padding-top: 70px; }
<nav class="navbar fixed-top ...">
  ...
</nav>

Fixed to the bottom

For make a navigation menu fixed on bottom of the window, just add .fixed-bottom.

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

.body {padding-bottom: 70px; }
<nav class="navbar fixed-bottom ...">
  ...
</nav>