#1) On mobile, opt for a consolidated header that takes minimal space

0 comments
Header
 

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

 

Amazon’s header on mobile is great inspiration:

  • row 1: burger menu, logo, account, cart
  • row 2: search box
  • row 3: (scrollable) link bar

The only problem I see is that it is neither sticky nor semi-sticky (reappearing when scrolling back up).

 

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

Another interesting option suggested by one of the members of my Ecom Convert group is to make row 2 (search bar) sticky and when scrolling down the burger menu drops to row 2. So effectively when scrolling down you only have what is needed: the burger menu and the search.

test

Leave a Reply