Website Headers

Header Simple – logo, hamburger, cta

Site Header [ 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.

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

Site Header [ 2 ]

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

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

Site Header [ 3 ]

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

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

Site Header [ 4 ]

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

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

Site Header [ 5 ]

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

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

Site Header [ 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.

This header type shouldn't need a top bar.