#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

#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

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

List your main product categories in your menu’s level 1. 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. Around 3-7 category menu items is best. The exception to this is if you have several other very important pages besides your product categories which you also w...

#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

Post-sale actions are for example: Sign In / Register, Order Tracking, Customer Service, …

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

#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. And if there is an X button, it should be big enough to be easy to click.

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