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
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
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...
#8) On mobile, make sure your menu items are big enough to be easily clickable on smaller devices like the iPhone 6
Take the time to actually test your store on various mobile devices.
Of course, it’s OK if some of those menu items are expandable and that when expanded the menu is longer than one screen.
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.
Post-sale actions are for example: Sign In / Register, Order Tracking, Customer Service, …
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.
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.
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.