Context 1.0

Header

Context's header appears at the top of each page. You can make your header transparent, compact or inline, add your logo and center or left-align your menu and logo to grab your customers' attention. You can also configure your store's mega navigation menus from this section.

On mobile devices, the header shrinks down into a menu icon, and the navigation becomes a drawer flyout::

Configure the header

To configure the header:

STEPS

  1. From your Customize theme editor, select the Header section.

  2. Choose a Header style to select between Inline links or Menu icon styles.

  3. Choose an Alignment for your header on desktop. Left aligns your logo and menu along the left side, and Center aligns them to the center.

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

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

  6. (Optional.) Use the Sticky header logo image file selector to select or upload a logo for your sticky header.

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

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

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

  8. (Optional.) Configure your header to be transparent on the Home page and the About pages, and set your colors and transparent logo.

    The following image compares Context's header with the transparent header:

  9. Click Save.

Settings reference

Context's header has the following settings:

Header style

Choose a header style: either Menu icon (☰) or Inline links. Inline links displays your menu as a traditional list of menu items, while Menu icon displays the mobile icon to trigger the drawer menu. Note that the mega nav feature only works with the Inline links setting.

Alignment

Choose between left or center. Left aligns your logo and menu along the left side, and Center aligns them to the center.

Note that this only applies to the Inline links header style.

Logo image

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

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.

Sticky header logo image

Select or upload an image to be used as the logo in the header as you scroll.

If you don't upload a logo, the space appears blank.

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

Because the sticky style of the header is smaller, we recommend using a smaller logo or icon for this spot.

If your menu is longer (more than 5 items), you may not want to use a logo here, because the menu items could overlap the logo space.

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.

Transparent header

See the Transparent header article for information about its settings.

Enable 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 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

STEPS

  1. From your Customize theme editor, 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. Check the Enable on about page checkbox to turn on the transparent header feature using the About page template.

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

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

  7. 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.

  8. Click Save.

Settings reference

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 Context'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 Mega nav

From Context'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.

Before you start

Make sure your main navigation menu has nested menus in it. 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
  Collections
    Naomi
    Pandora
    Helix
    Business
  Type
    Messenger
    Evening
    Tote
  Everything
    New Releases
    Summer 21
    Sale
Blog
About
Contact

Where the indented items are nested menus inside your menu. See how Shop has a nested menu item called Collections, 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:

STEPS

  1. From your Customize theme editor, select the arrow beside the Header section. markdown:shopify-header-mega-nav.md

  2. 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. Click Save.

Settings reference

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.