Site header
Note: Colors for the header are configured in Theme settings/colors.
For information on how to structure your navigation menu in Shopify to work with the theme, see our Navigation documentation.
Settings
Logo image
Upload your store logo as an image. If there is no image uploaded, your store name will show here in heading font.
Logo for transparent header
If you decide to make the logo transparent on the homepage, you can upload a different version of the logo (like in a different color) that will be shown when the header is transparent. If no image is uploaded here, the original logo image will display on a transparent header.
Logo width
How wide in pixels the logo should be.
Logo width (mobile)
How wide in pixels the logo should be on mobile screens.
Design options
Logo position in header
There are three options for the header layout. All of these are for desktop. The mobile layout is the same for all three options.
Middle left
Middle center
Top center
Enable sticky header
When this box is checked, the header will animate off screen when the customer scrolls down the page, and then will animate back in to show at the top of the screen as a customer scrolls up on the page.
Transparent header on home page
Check this box to lay the header on top of the first section of the homepage without its background color. Example:
Transparent header font color
Choose a color for the navigation links and button icons that will stand out on the background of the first section of the homepage when the header is transparent.
Menu
Choose a menu from Navigation to be the site navigation. This defaults to "Main menu". See our Navigation documentation on how the structure of the navigation works in the header with dropdown links, top level links, etc.
Main menu text options
Header font style
Choose a font style for the main navigation links.
Header text size
(Whisk 5.0.0 and greater)
Choose a font size for the main navigation links.
Make header text bold
Make the font for the menu links in the header bold.
Dropdown menu text options
(Whisk 5.0.0 and greater)
Top level menu items are the first ones that appear when you click open the dropdown. They can either be a freestanding link, or have sub links. In the example below, "Blog" has sub links that will display when the "Blog" linked is clicked.
Top level menu items font style
Choose a font style for the top level links when the menu item has a simple dropdown.
Top level menu items text size
Choose a font size for the top level links.
Make top level menu items bold
Make the font for the top level links bold.
All secondary level links will default to the body copy at it's default size (medium)
Mega menu options
Top level menu items font style
Choose a font style for the top level links when the menu item is a mega menu.
Top level menu items text size
(Whisk 5.0.0 and greater)
Choose a font size for the top level links.
Make top level menu items bold
Make the font for the top level links bold.
All secondary level links will default to the body copy at it's default size (medium)
Section spacing
Adjust the top and bottom padding within the header.
Blocks
Mega menu
Turn one or more of your main dropdown links into a mega menu. See our Mega Menu page for more details and instructions.
