Layout and style

Header

Header layout

New header styles with Icons and menu options were added to v5.0.0 on April 12 2022. See our changelog to learn more.

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 (☰).

STEPS

In your theme editor (Customize):

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

   
2. Set the Header style to Text only, Icon, or Streamline. The Streamline style is always used for mobile devices.

   

   Text only

   

   Icon

   

   Streamline
3. If you chose the Icon or Text only style, select a Navigation position to change the alignment of the Store title (or logo) and menu links.

   When set to Center, the store logo or title appears on the left.

   
4. Choose how nested or mega nav menus open: either when customers Hover over or Click on the parent link.

5. Click Save.

Header colors and fonts

Expanded font style options were added to v5.0.0 on April 12 2022. See our changelog to learn more.

Click on the Header section and open the Theme settings tab to find options for colors and fonts.

STEPS

In your theme editor (Customize):

1. Click on the Theme settings tab to find the header font and color options.

   
2. Use the Logo font size slider to change the size of your store title.

   If you uploaded a logo image, use the Custom logo size slider above.

3. Set the Navigation font weight to display your menu links and icons with a Normal or Bold style.

4. Check the Display navigation font in uppercase option to show the regular case of your store title as set in the Shopify Admin (Settings > Store details > Basic information).

5. Change the Text color of the menu links, store title, and icons in the header.

6. Click Save.

Settings reference

Click on the Header section to find the following settings:\

Setting	Description
Header style	Use the Text only, Icon, or Streamline header style. The Streamline style displays menu links in a drawer with a menu icon (☰). For mobile, the style is always Streamline.
Navigation position	Change the layout and alignment of the Store title (or logo) and menu links. This setting is available for the Icon and Text only header styles.
Dropdown interaction	Choose how nested or mega nav menus open: either when customers Hover over or Click on the parent link.

Setting	Description
Logo font size	Select the relative font size of your store title. This setting applies when no logo image is uploaded.
Navigation font weight	Select a Normal or Bold style for your menu links and header icons.
Display navigation font in uppercase	Display your menu links and store title in all capitals.
Text color	Select the color of the text.

---

Related links

Header