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

Search

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