Header

Ira’s header appears at the top of each page. You can customize it to fit with your brand and product offerings.

On mobile devices, the header shrinks down into a floating menu bar:

Configure the header

To configure the header:

1. From your theme’s “Customize” screen, select the Header section.

2. (Optional.) Use the Logo image file selector to select or upload your logo file.

   We recommend using a logo with a transparent background (PNG format).

3. (Optional.) If you added a logo, use the Logo max width slider to change size of the logo in the header.

4. Choose a Main menu to be displayed in the header.

   For more information about how menus work on Shopify, see their Menus and links article. You can use the Edit menu link to go edit the menu if it’s not quite right.

5. Choose a menu Style and a header Logo position.

6. (Optional.) Configure your header to be transparent.

   For more information about this, see the Transparent header article.

7. Use the Save button in the top-right corner when you are finished editing.

Settings

Ira’s header has the following settings:

Logo image

Select or upload an image to be used as the logo in the heading.

If you don’t upload a logo, the name of your store appears instead.

We recommend using a logo with a transparent background (PNG format).

Logo max width

Select the display width, in pixels, of your logo image.

Your logo height is scaled to match the width. You can use this setting to make the logo super tiny or super huge.

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.

Style

Choose a menu style: either Menu icon (☰) or Inline links.

If your menu has too many inline links to be displayed, the menu becomes scrollable.

On mobile devices, the style is always set to Menu icon.

Logo position

Choose the position of your logo in the header: either Left or Center.

Your main menu swaps places with the logo.

See the Transparent header article for information about its settings.

Transparent header

You can make your store’s header transparent. This is great for stores that want to push big, bright product photography.

In this image, you can see the transparent header enabled, helping the Slideshow section section below to pop out.

The transparent header is only used in certain situations. Otherwise, your normal header settings are used.

Set up the transparent header

1. From your theme’s “Customize” screen, select the Header section.

2. Scroll down to the Transparent header section of the header settings.

3. Check the Enable on home page checkbox to turn on the transparent header feature.

4. Choose the colors (Text color, Icon color, and Border color) that should be used for the header content.

5. Choose the Border opacity for the borders, where 0% is invisible and 100% is completely opaque.

6. Choose a transparent Logo image.

   This image is in addition to your normal logo image. For example, your transparent header logo may need to look good on dark-colored backgrounds, while your normal header logo may not need to.

7. Use the Save button in the top-right corner when you are finished editing.

Settings

The transparent header has the following settings:

Enable on home page

Select this checkbox to enable the transparent header feature.

Text color

Select a color to be used for all text in your header.

Make sure the text is readable against your top-most home page section’s background colors, images, or video.

Icon color

Select a color to be used for all icons in your header.

We recommend using the same color you used for your Text color.

Border color

Select a color to be used for all of the borders and lines in Ira’s header layout.

Border opacity

Use the slider to set the border opacity: where 0% is invisible and 100% is completely opaque.

Logo image

Select or upload a logo image to be used on the transparent header.

This logo is only used when the header is shown as a transparent header. Scroll up to the normal header settings to pick the normal logo.

Transparent header

You can make your store’s header transparent. This is great for stores that want to push big, bright product photography.

In this image, you can see the transparent header enabled, helping the slideshow section section below to pop out.

The transparent header is only used in certain situations. Otherwise, your normal header settings are used.

Set up the transparent header

1. From your theme’s “Customize” screen, select the Header section.

2. Scroll down to the Transparent header section of the header settings.

3. Check the Enable on home page checkbox to turn on the transparent header feature.

4. Choose the colors (Text color, Icon color, and Border color) that should be used for the header content.

5. Choose the Border opacity for the borders, where 0% is invisible and 100% is completely opaque.

6. Choose a transparent Logo image.

   This image is in addition to your normal logo image. For example, your transparent header logo may need to look good on dark-colored backgrounds, while your normal header logo may not need to.

7. Use the Save button in the top-right corner when you are finished editing.

Settings

The transparent header has the following settings:

Enable on home page

Select this checkbox to enable the transparent header feature.

Text color

Select a color to be used for all text in your header.

Make sure the text is readable against your top-most home page section’s background colors, images, or video.

Icon color

Select a color to be used for all icons in your header.

We recommend using the same color you used for your Text color.

Border color

Select a color to be used for all of the borders and lines in Ira’s header layout.

Border opacity

Use the slider to set the border opacity: where 0% is invisible and 100% is completely opaque.

Logo image

Select or upload a logo image to be used on the transparent header.

This logo is only used when the header is shown as a transparent header. Scroll up to the normal header settings to pick the normal logo.

Add a mega navigation menu

From Ira’s header settings, you can add a mega navigation menu. Using this menu, you can add more links to your main menu. Your customers can browse large catalogs more quickly and more easily.

The mega navigation menu makes use of your existing Main menu. You can nest sub-menus inside of your menus, which is what makes mega navigation menus so mega.

Here’s an example of a main menu with nested menus within it, as shown in the Shopify admin:

Set up a “mega nav menu”

You can add one or many mega navigation menus. Our demo store, Active, has a mega nav menu for its Shop menu item.

Before you start

Make sure your main navigation menu has nested menus with in. You can add or change menus from the Navigation page of the Shopify admin.

This feature makes use of nested menus. So your menu would look something like this:

Shop
  Women
    All
    Leggings
    Sports Bras
  Mens
    All
    Tops
    Bottoms
  New Releases
Blog
About
Contact

Where the indented items are nested menus inside your menu. See how Shop has a nested menu item called Women, which has its own nested menu items.

In the Shopify admin, you can drag-and-drop to reorder and nest your menu items. When you’re finished, it might look like this:

To learn more about how Shopify menus work, see Shopify’s Menus and links guide.

Set up a mega nav menu

To set up a mega nav menu:

1. From your theme’s “Customize” screen, select the Header section.

2. Under Content, use the Add mega nav button to add a new menu.

3. Set the Dropdown parent link. This text should match the menu with sub-menus you added to your navigation menu.

4. (Optional.) Select or upload a Mega nav featured image to be displayed inside the mega navigation menu.

   

   The image is cropped from the center into a 4:3 image.

   Note that if you use the Menu icon header style (part of the header settings), or if you’re viewing your store on a narrower mobile device, the mega nav menu is shown as part of the Drawer menu and no featured image is displayed.

5. Use the Save button in the top-right corner when you are finished editing.

Settings

For each mega navigation you add, the following settings are available:

Dropdown parent link

Add text that matches a top-level menu item in your store’s main navigation menu.

This link is used to activate the mega nav menu. Sub-menus are populated beneath this parent link.

Mega nav featured image

Select or upload a feature image to be displayed as part of the mega nav menu.

If the image is taller or wider than 4:3 (width:height), it is center-cropped and displayed as a 4:3 image.

Related articles

• Drawer menu
• Menus and links