search

Layout and style

Header

Match the look of your brand by changing the style and layout of your Header menu and store title. Change the position of your menu links or display them in a drawer menu that can be opened by clicking a Menu icon (☰).

hashtag
Inline links

On desktop devices with Inline links enabled, Spark's header displays your menu links horizontally. This setting is most effective with a few top-level menu items with short titles. If there are too many items in your navigation, we recommend setting the Links position to Below or the Style to Menu icon.

hashtag
Menu icon

The Menu icon always appears on mobile devices, but you use the Style option display it at all times. When customers click the menu icon (☰), the drawer menu opens.

chevron-rightSTEPShashtag

In your theme editor (Customize):

  1. Click on the Header section to open the section settings.

  2. Set the menu Style for the Main menu as either Links or Menu icon.

    The Links option displays the menu at all times except on mobile. The Menu icon option keeps the menu in the drawer menu.

  3. Set the Links position for the Main menu as either Below or Inline.

    For menus with many links or long titles, we recommend placing the links Below the header title.

  4. Choose whether to Enable sticky header to fix the Header to the top of the screen or window when customers scroll down the page.

    If disabled, the Header remains at the top of the page.

  5. Click Save.

hashtag
Settings reference

Click the Header section to find the following settings.

Setting
Description

Main menu

Select a menu to be displayed in the header. Menus are a Shopify feature. See Shopify's Menus and links to learn more about them.

Secondary menu

Select a menu to be displayed in drawer menu.

Style

Choose a menu style: either Menu icon (☰) or Links. Learn more here. On mobile devices, the style is always set to Menu icon.

Links position

Choose to display the main menu links to the side header title or directly below. The links will appear either to the left or the right depending on the Logo position.

Logo position

Choose the position of your logo in the header: either Left or Center. The Menu link and Links will change position depending on the Logo position.

\

Related links

Header

Last updated