Header Layouts

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

Headers

Header title Link
Default Open Demo
Full container Open Demo
No navbar Open Demo

Demo headers

Header title Link
Default Open Demo

Header default - Collapse breakpoint

Header title Link
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header - Logos

Header title Link
SVG logo Open Demo
PNG logo Open Demo

Header - Alignments

Header title Link
Left Open Demo
Right Open Demo
Center Open Demo

Header - Events

Header title Link
Hover Open Demo
Click Open Demo

Header default - Absolute top

Header title Link
Default Open Demo
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header default - Absolute bottom

Header title Link
Default Open Demo
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header default - Second screen

Header title Link
Default Open Demo
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header default - Absolute top center aligned logo on top

Header title Link
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header default - Sticky top

Header title Link
Default Open Demo
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header default - Sticky bottom

Header title Link
Default Open Demo
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header default - Toggle style

Header title Link
Default Open Demo
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header default - Floating

Header title Link
Default Open Demo
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header - With topbar

Header title Link
Default Open Demo
Center aligned logo on top Open Demo

Header - On scroll behavior

Header title Link
Hide topbar Open Demo
Toggle topbar Open Demo
Changing logo on scroll Open Demo
White Background on Scroll (Sticky Top) Open Demo

Header default - Transparent

Header title Link
Default Open Demo
With border Open Demo
Breakpoint-sm Open Demo
Breakpoint-md Open Demo
Breakpoint-lg Open Demo
Breakpoint-xl Open Demo

Header default - Color schemes

Header title Link
Dark Open Demo
Navbar primary Open Demo
Navbar gradient Open Demo
Navbar dark Open Demo
White-to-dark on scroll Open Demo
Dark-to-white on scroll Open Demo
Submenu dark Open Demo

Header default - Navbar horizontal scroll

Header title Link
Default Open Demo
With Scroll-nav Open Demo

Header default - One-page navigation

Header title Link
Navbar Default Open Demo
With dropdown Open Demo
With dropdown (links) Open Demo

Header fullscreen

Header title Link
Fullscreen Open Demo

Header title Link
Push from top Open Demo
Classic Open Demo

Account

Header title Link
Dropdown Open Demo
Link Open Demo
Modal window signin Open Demo
Sidebar signin Open Demo
Sidebar with profile image Open Demo
Sidebar with profile image and name Open Demo

Shopping cart

Header title Link
Empty dropdown Open Demo
Dropdown with items Open Demo
Link Open Demo
Empty modal window Open Demo
Modal window with items Open Demo
Empty sidebar Open Demo
Sidebar with items Open Demo

Header sidebar on "Hamburger" button

Header title Link
Left Open Demo
Right Open Demo