Header & Navbar

The navbar is how visitors move between your sections and pages. This article covers Shock’s three navbar layouts, its sticky-scroll behaviors, and the mega menu, all built on Bootstrap 5.

Navbar layouts

Each layout is a single <nav> element; each ships in light and dark demo versions.

Basic

<nav id="navbar" class="navbar navbar-expand-lg auto-hide scheme-1 primary">

The standard horizontal navbar — logo on one side, links on the other.

Extended

<nav id="navbar" class="navbar navbar-extended navbar-expand-lg absolute scheme-1 primary">

A taller navbar with room for extra content, positioned absolute over the hero.

Centered

<nav id="navbar" class="navbar navbar-centered navbar-expand-lg auto-hide scheme-1 primary">

A symmetrical layout with the logo centered between two groups of links.

Sticky behavior

How the navbar reacts as the visitor scrolls is controlled with a class:

Autohide

Add auto-hide to hide the navbar when scrolling down and reveal it when scrolling up — keeping content front and center while staying one scroll away.

<nav id="navbar" class="navbar navbar-expand-lg auto-hide scheme-1 primary">

Fixed on scroll

Wrap the navbar to keep it always visible, pinned as the page scrolls.

<div id="navbar" class="navbar-bottom-wrapper fixed-on-scroll">

Relative

The standard navbar with no special class — it scrolls away with the page and doesn’t come back.

Mega menu

For sites with lots of pages, Shock includes a mega menu — a wide, multi-column dropdown that animates into view:

<div class="dropdown-menu megamenu animate fade-down" role="menu">

Start from a demo

Rather than build a navbar from scratch, open the demo whose header is closest to what you want, then copy its <nav> block and edit the links. All the classes above are already wired up in the demos.

Continue to FooterThe footer layouts and how to assemble your own.