Header

The main navigation for the site is found in the header section.

Header on the Distinction demo store, with a mega menu block assigned to "Shop"

The header mostly contains settings related to the header bar itself and the desktop menus. Settings for the mobile navigation can be found in the sidebar menu section.

Quick start

• Create your desktop menu in Content > Menus, then select a desktop menu in the Customizer

• Choose your preferred layout (horizontal or vertical)

• Decide if you want to use icons or text for secondary menu items (cart, login)

• If you want to add mega menus, follow this guide

Settings

• Desktop menu: Create a menu and add it here. The theme will automatically create a nested navigation based on the menu structure, but you may wish to create more visually interesting menus by creating a mega menu block (see below).
• Layout:

  • Layout (desktop): Choose between two different header styles on larger screens. On smaller screens, the header menu will always have the sidebar menu trigger on the right, and the logo in the center.

    • The horizontal desktop layout features the main menu on the left, the logo in the center, and the secondary menu on the right.

      • The vertical desktop layout features the site logo on the left, the main menu in the center and the secondary menu on the right. Both menu types support dropdown and mega menus, but we recommend the horizontal desktop layout if you have a lot of top level links.

  • Sticky header type: The sticky behaviors are none, always and on scroll up. These options describe the conditions under which the sticky header is active. If you are using the vertical desktop layout or your header height is tall, we don't recommend using the always option as it may take up too much vertical space.

  • Use icons instead of text: Converts secondary menu links (such as the cart and login/account links) to be displayed as icons on the desktop layout.

  • Enable mega menu overlay: Adds an overlay to cover the rest of the site when a mega menu is open. This will only apply for mega menus, not regular dropdowns.

• Transparent header:

  • Enable transparent header: The header background becomes transparent when certain conditions are fulfilled. The first section on each page must be an imagery based section, such as a slideshow, image, or video banner section, in order for the header to be transparent. You can apply a specific color for the transparent header in the colors subsection.

  • Enable blur on scroll: Adds a subtle background blur behind the header only when it is transparent, creating a frosted glass effect on scroll

  • Use alternate logo: Enable this to display the alternate logo specified in theme settings.
  • Text: Choose the foreground color. For example, if you know that you'll be using only darker images underneath the transparent header, keep it as white (#FFFFFF).

• Color scheme: See common settings
• Padding: See common settings
• Borders: Enable to create more separation between your header and the rest of the page

Mega menu blocks

Precision uses two mega menu blocks on desktop: one for Shop All and one for Theme Features

A mega menu is a way to display dropdown links in a more visually engaging way. Use mega menu blocks when you wish to create hierarchy or draw attention to certain links on your site with imagery in addition to text

To convert a regular dropdown in to a mega menu:

1. Add a new mega menu block

2. Type the name of the item you wish to be a Mega menu in the menu item field. This must match exactly, including whitespace and casing. The dropdown items for this link will be used to populate the mega menu.

3. Choose a color scheme

4. There are two different layout options for the mega menu, which only apply if an additional color scheme is used. When the fade layout is selected, the mega menu will fade to match the new color scheme. When the split layout is applied, the mega menu will be split in half, with one half using the original color scheme and the other using the new color scheme.

5. When using the vertical header and the fade mega menu, there is a chance that you may have color contrast issues with your original logo. In that case, upload a logo with a different color scheme under Settings > Logo > Alternate logo and enable the use alternate logo checkbox to switch logos when the mega menu is active.

6. Add up to 3 promotion blocks. For each promotion:

   1. Image

   2. Image ratio

   3. Label

   4. Link

FAQ

Why can I only see the hamburger menu on desktop?

If your screen is on the smaller size or you've zoomed in, you might not be able to preview the desktop menu initially due to the customizer sidebar width. The breakpoint for the header is approximately 1216px (subject to your default font size), so smaller desktop screens may need to zoom out to see the correct layout. To zoom out, press control/command and the minus (-) key simultaneously on your keybard.