8. Icon Theme: Setting up the Header
In this article, we will go through the process of setting up the Header Section.
The Icon theme has many options for controlling the layout, look, and style of the header. Here is a breakdown of the options, what each will do when adjusted, and how to set it up.
Show the header and navigation at full-screen width. If you keep this unselected, it will be constrained to a maximum width of 1200px.
Enable Sticky Header - Allows the header to remain fixed to the top of the page as you scroll.
Float header over slideshow - On the homepage only it will show the header and navigation floating over the top of the slideshow instead of within its own dedicated section above. A bottom border can also be added.
Message bar - Add a message in the top bar informing customers of Sales, Shipping deals or just a welcome message. With independent control for text size.
Add bottom border - The bottom border creates an aesthetical border separating the header from page content.
Additional Link Bar - This allows you to create secondary navigation which will appear within your top bar.
Cart icon position - Here you choose to nest your Cart icons within your header or top bar position
Logo - Add a logo image. Control the logo width and logo position within the header. If you do not upload an image the logo defaults to text only and you have options to choose the logo text case and weight.
Alternative Logo - This will change as you scroll with the sticky header option enabled.
Note - Center aligned logo is only advised on stores with minimal navigation links
Lastly within the header settings this is where you include your main menu navigation and setup your mega menu functionality. We will go over this in a little more detail within the document.
Show Products in drop down - This option can be toggled on or off to display products within the dropdown. If you would like to display products here and this option is checked, this functions as follows:
The product drop down feature requires that a main menu link points to a collection and is set up to be a dropdown, this will then pull a few of the first products from this collection to display with the dropdown associated with this link for customers to view as they scroll through the navigation.