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

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...

#3) On desktop, opt for a header with 2 or 3 rows

On desktop, opt for a header with 2 or 3 rows. For example: Row 1 contact info “FREE SHIPPING ON ALL ORDERS” “My Account” link Country selection Row 2 logo (left and clickable) search box (middle) cart icon (right) Row 3 Mega menu with the main categories as level 1   How tall should the header be? I looked at 12 well-known brands, and the average ...

#4) List your main product categories in your menu’s level 1

One of the biggest issues I see when looking at stores (especially newer ones) is the lack of categories in the header. I recommend listing your main product categories in your menu’s level one. Show them directly in the menu (on both desktop and mobile). In my experience, you can usually fit up to 10 categories in the menu, but less is more. More than 10 items beco...

#9) Have as few menu items as possible, and make sure they fit on one screen (on mobile)

Of course, it’s OK if some of those menu items are expandable and that when expanded the menu is longer than one screen.

#10) On desktop, opt for a Mega Menu

Show the sub-categories as columns – ideally 3 to 5). Optionally show an image for each column. If your store has a very big navigation structure (lots of menu items), you can have a “multi-dimensional” Mega Menu that lets users dive into a few levels of menu items.

#11) Place the post-sale actions above the fold in the menu or in the header

Group account-related features under the Account icon. So, for example, the Order Tracking doesn’t need to be a separate menu item.   On desktop, clicking the account can open a panel with either a few links, or just mentioning what you’ll have access to once logged in, such as: Log In Join My Account My Orders Set Up Return Wish List   I beli...

#14) Make your header sticky or semi-sticky

Semi-sticky means that it re-appears when scrolling back up. A sticky or semi-sticky header makes visitors not have to scroll all the way up to go to another page or do another search. You can also simplify the sticky or semi-sticky header that shows up as the user is scrolling back up, and then show the full header when they’re back all the way up. For example,...

#15) On mobile, the burger menu should be easy to close

That usually means that the left swiping gesture and tapping outside of the menu panel should close it. If there is an X button, it should be big enough to be easy to click. I often see burger menus on mobile where the X icon to close it is in a totally different spot than the burger menu icon. Make sure that the X to close is in the exact same location as the burger ...

#16) Place a search box prominently in the header

Especially if you have a high quantity of products, an accessible search is crucial to a good user experience, and making it easy for users to find what they want from your store.   It doesn’t get much better than IKEA’s layout when it comes to having a search box prominently placed in the header.

#86) Avoid menu flickering by implementing a 300ms hover delay and/or mouse path analysis

Menu flickering is when users move their mouse towards a sub-category, and instead accidentally activate another parent category, causing the drop-down menu to change.

#151) Move your non-essential pages to the footer menu

For example, these pages can appear only in the footer. They don’t need to be in the header menu. Blog About Us Contact Us Shipping & Returns Information    

#152) Simplify your logo on mobile

There’s less space on mobile. The ideal solution is to have a logo already so simple that it is just as clear on desktop and mobile. But perhaps that’s not your case. An easy solution to that is to simplify it. If on desktop it contains a slogan underneath, remove it on mobile. Make sure that any text in the logo is easily readable (big enough). If your logo ...

#159) Header icons should be easy to understand at first glance

Two out of IKEA’s three icons are confusing.   On desktop it’s possible to add alternate text which shows when hovering the mouse on the icon, but not on mobile. So I think a better approach is to not use confusing icons in the first place by not deviating too much from standard icons for important features. For a shopping list for example, which I view ...

#184) Show the number of items in their cart

This helps shoppers keep track of their purchases, and makes it clear to them that they added something to cart.