What is the header section?
As the first thing a customer sees on your e-commerce site, the header is crucial to the brand experience. The Showcase header integrates seamlessly with your store by offering scrolling and transparent design options, a choice of a burger or inline menu, an innovative mega menu with promotional images and sleek icons.
A separate guide is available for How to set up the mega menu and how to add promotional images into your menu.
How to set up the header section
- Open the Theme Editor and select the Header section.
- A Featured link can be created. This will show any menu item in the Featured link color, which can be changed in Theme settings > Colors > Header. To have multiple navigation links appear in this color, separate each link text with a comma.
- Choose a Desktop navigation style - Show links or Show burger menu. The burger menu displays an icon to open the menu and will center the logo. Show links will center align the menu and place the logo on the left. On smaller screens, where there isn't space to show inline links, the burger style menu will always be shown.
- Choose the Navigation background. This setting determines whether the navigation sits on a transparent or colored background and when the Main logo and Contrast logo is used.
- Choose the Scroll behaviour.
- Sticks on scroll keeps the header visible at all times, anchored at the top of the page.
- Scrolls with the page keeps the header at the top of the page so the header section will disappear as the customer scrolls past it.
- Hides on scroll down will show the header when customers scroll up.
- To make effective use of the transparent and scrolling header, a Main logo and Contrast logo can be selected. The contrast logo should be the same size as your main logo but in a contrasting color and is designed to be used over image-heavy sections to ensure your logo is still visible. The associated Contrast navigation text color is set in Theme settings > Colors.
- In the Announcement settings, there is an option to add an announcement message to show above the header. This is fixed at the top of the page regardless of the header scroll choices.
- Choose your preferred cart basket icon design.
How do I set up a full width mega menu?
Refer to our Showcase mega menu guide which covers this in more detail.
I've chosen a links navigation style so why do I see a burger menu?
The burger menu is shown on smaller screens where there isn't enough space to show the links. This may be the layout seen in the Theme Editor as the settings sidebar takes up screen space.
How do I add images to my menu?
Refer to our How to add images to the menu guide which covers promotional images in more detail.