Headers (Navbar)

Examples for Front's powerful, responsive navigation header, the navbar.

Headers types

Header title Link
Default See in action
With topbar See in action
No navbar See in action
Nav wrap (Where "Buy Now" button stays visible across all device resolutions) See in action
Front Header with Bootstrap dropdown only - no hs-megamenu.js required See in action
Transparent See in action
Transparent with divider See in action
Absolute top See in action
Sticky top See in action
Toggle style See in action
Floating See in action
Fullscreen See in action

Demo headers

Header title Link
Course demo - main Header See in action
Course demo - inner Header See in action

Navbar Alignments

Header title Link
Left See in action
Right See in action
Center See in action

Events

Header title Link
Hover See in action
Click See in action

On scroll behaviors

Header title Link
Hide topbar See in action
Toggle topbar See in action
Changing logo See in action
From Transparent to White Background (Sticky Top) See in action

Navbar horizontal scroll

Header title Link
Default See in action
With Scroll-nav See in action

One-page navigation

Header title Link
Navbar Default See in action
With dropdown See in action
With dropdown (links) See in action

Account

Header title Link
Dropdown See in action
Modal Sign In See in action
Sidebar Sign In See in action

Shopping cart

Header title Link
Empty Cart in a Dropdown See in action
Cart Items in a Dropdown See in action
Empty Cart in a Modal See in action
Cart Items in a Modal See in action
Empty Cart in a Sidebar See in action
Cart Items in a Sidebar See in action