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

Search

Header title	Link
Slide down	See in action
Push from top	See in action
Classic	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