Compact and Uncluttered

The header is the first stop for anyone using your site. It should announce who you are while offering easy navigation to the rest of the site.

The fact that the header appears on every page makes it doubly important for you to get it right. Your header should offer as much utility as possible while remaining compact and uncluttered.

This is especially crucial on mobile devices where space is limited.

Typically, something like this:

Row 1 (bar above the header): Free Shipping, or offer
Row 2: Burger menu icon (left), logo (middle), cart icon (right).
Row 3: Search box

When at the top of page:

It could be something like this:

The first row announces any promotions and offers.

The collapsible burger menu on the second row saves a lot of valuable space and should ideally be used to access your product categories, contact information, account settings, and other navigation options.

Eye tracking data from Baymard’s testing has also shown that 29% of users instinctively turn towards the top right hand corner when looking for their shopping cart. As this has become the conventional practice, placing your shopping cart anywhere else would be a gross miscalculation.

What I’d recommend is keeping at least row 1 sticky, and row 2 (and optionally row 3) semi-sticky. Read more about sticky headers.