Website Headers

Header Simple – logo, hamburger, cta

Header Simple –
logo, hamburger, cta [ 1 ]

Components: Logo, Hamburger Menu, CTA
Use Cases: Sites with lots of/long menu links. Sites that want a Call-to-action in the header.

View Demo
Pair header with a top bar for additional elements:
Top Bar1 | Top Bar2
Header Simple – logo, hamburger, search

Header Simple –
logo, hamburger, search [ 2 ]

Components: Logo, Hamburger Menu, Search
Use Cases: Sites with lots of pages/posts that need searchability. Sites with lots of/long menu links.

View Demo
Pair header with a top bar for additional elements:
Top Bar1
Header Simple – logo, menu, cta

Header Simple –
logo, menu, cta [ 3 ]

Components: Logo, Menu, Call-to-action
Use Cases: Sites with very few menu items. Sites that want a CTA in the header.  

View Demo
Pair header with a top bar for additional elements:
Top Bar1 | Top Bar2
Header Simple – logo, menu, search

Header Simple –
logo, menu, search [ 4 ]

Components: Logo, Menu, Site Search 
Use Cases: Sites with lots of info/posts that need searchability. Sites with very few menu items.

View Demo
Pair header with a top bar for additional elements:
Top Bar1
Header Simple – logo, menu with cta css

Header Simple –
logo, menu with cta css [ 5 ]

Components: Logo, Menu, CSS Class 
Use Cases: Sites with very few menu items. Sites that want a menu item styled like a CTA.

View Demo
Pair header with a top bar for additional elements:
Top Bar1 | Top Bar2
Header Middle – logo, hamburger, cta, search, icons

Header Middle –
logo, hamburger, cta, search, icons [ 6 ]

Components: Logo, Hamburger Menu, Call-to-action, Site Search, Social Icons
Use Cases: Sites with lots of/long menu links, extra header elements, a centered/vertical logo.

View Demo
This header type shouldn't need a top bar.