Navbar Layout

Shock Theme has different Navbar layouts pre-built based on Bootstrap 5. Next, see the available demos.

Basic Navbar

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

Extended Navbar

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

Centered Navbar

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

Sticky Navbar

The Navbar is the visitor's control, where he can navigate between sections and pages. A Sticky Navbar improves usability because it works dynamically as the page scrolls.

Autohide

The Navbar is hidden when the page is scrolled down and is visible only when the page is scrolled up. This is certainly the most common option because it maintains the full vertical size of the screen without losing control of the Navbar.

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

Fixed On Scroll

The Navbar is always visible. This can be useful when the visibility of the Navbar is the most important thing for the page.

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

Relative

The Navbar is only visible at the top and when scrolling up or down it is hidden.

<nav id="navbar" class="navbar navbar-expand-lg scheme-1 primary">
<!-- items -->
</nav>

Mega Menu

For sites with many pages, a common Navbar does not handle everything properly and a Mega Menu is necessary. Shock Theme provides many options that can be seen in the demos.

Example

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