> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header

> Configure your store's primary navigation area with flexible layout options and brand visibility.

The header is the primary navigation area of your store and appears consistently across pages. It plays a key role in brand recognition, navigation clarity, and access to essential store actions like search, cart, and account access.

A well-configured header helps customers orient themselves quickly while keeping navigation flexible and scalable.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/header-overview.png" alt="Header section overview" />

## What this section controls

This section controls the layout, behavior, and content of the store header, including navigation structure, logo display, utilities, and advanced menu features such as mega menus and drawers.

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Locate Header">
    The Header section is pre-added at the top in the left sidebar.
  </Step>
</Steps>

<img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/header-location.png" alt="Location of header in Theme Customizer" />

## Layout options

Choose how the logo and navigation are positioned within the header. This setting affects the visual hierarchy and available space for menu items.

<Tabs>
  <Tab title="Logo centered">
    The logo is centered, with navigation distributed around it. Best for brand-focused stores with moderate navigation needs.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/layout-logo-centered.png" alt="Logo centered layout" />
  </Tab>

  <Tab title="Navigation centered">
    Navigation is centered, with the logo positioned to the side. Ideal for stores with extensive menu structures.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/layout-navigation-centered.png" alt="Navigation centered layout" />
  </Tab>

  <Tab title="Logo and navigation aligned to start">
    Both logo and navigation align to the start of the header for a traditional layout. Works well for text-heavy navigation.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/layout-aligned-start.png" alt="Logo and navigation aligned to start" />
  </Tab>
</Tabs>

## Key settings

<Tabs>
  <Tab title="Header behavior">
    ### Enable sticky header

    Keeps the header visible while customers scroll the page, ensuring constant access to navigation.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/sticky-header.png" alt="Sticky header setting" />

    <Tip>
      Sticky headers improve navigation accessibility but reduce visible content area. Test on mobile before enabling.
    </Tip>

    ### Borders for navigation elements

    Adds borders to the inward-facing edges of the first and last navigation elements. This can help visually separate navigation items without adding extra spacing.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/navigation-borders.png" alt="Navigation borders setting" />

    ### Enable navigation drawer layer

    Adds a show/hide interaction to third-level menu items inside the navigation drawer. This improves clarity when working with deeper navigation structures.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/drawer-layer.png" alt="Navigation drawer layer setting" />
  </Tab>

  <Tab title="Logo">
    ### Logo

    Select the primary logo used in the header. This logo appears by default on all pages.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/logo-upload.png" alt="Logo upload setting" />

    ### Logo for transparent header

    Defines an alternative logo shown only when the header is transparent. This is useful for maintaining contrast over hero images or media-heavy sections.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/logo-transparent.png" alt="Transparent header logo setting" />

    ### SVG code for logo

    Allows you to paste custom SVG code for the logo. When SVG code is provided, it overrides the uploaded image logo.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/logo-svg.png" alt="SVG logo code setting" />

    <Note>
      SVG logos offer better scalability and smaller file sizes, but require technical knowledge to implement correctly.
    </Note>
  </Tab>

  <Tab title="Utilities">
    ### Utilities link display

    Choose how utility items (search, account, cart) are displayed on desktop.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/utilities-display.png" alt="Utilities display options" />

    <AccordionGroup>
      <Accordion title="Icon" icon="icons">
        Displays utilities as icons only. Saves space and works well for familiar actions.
      </Accordion>

      <Accordion title="Text" icon="text-size">
        Displays utilities as text links. More descriptive but uses more space.
      </Accordion>

      <Accordion title="Icon with text" icon="circle-dot">
        Displays both icon and label together. Maximum clarity but requires more header space.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Additional links">
    ### First additional link

    Adds a custom link to the header. The link is positioned in the main navigation or utilities area depending on the selected layout.

    **Settings:**

    * **Title** - The label shown to customers
    * **URL** - The destination link

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/additional-link-1.png" alt="First additional link settings" />

    ### Second additional link

    Adds a second custom link to the header. The positioning follows the same rules as the first additional link.

    **Settings:**

    * **Title** - The label shown to customers
    * **URL** - The destination link

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/additional-link-2.png" alt="Second additional link settings" />

    <Tip>
      Use additional links for promotions, customer service pages, or seasonal campaigns that need prominent placement.
    </Tip>
  </Tab>
</Tabs>

## Country drawer settings

Controls how the country selector is displayed across the header and navigation. These options only appear when multiple countries are configured in your store settings.

<AccordionGroup>
  <Accordion title="Enable in header" icon="globe">
    Displays the country selector directly in the header. Its position depends on the selected header layout and may appear in the main navigation or utilities area.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/country-drawer-header.png" alt="Country selector in header" />
  </Accordion>

  <Accordion title="Enable in navigation drawer" icon="bars">
    Displays the country selector inside the desktop and mobile navigation drawer.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/country-drawer-navigation.png" alt="Country selector in navigation drawer" />
  </Accordion>
</AccordionGroup>

## Navigation settings

Controls which menus are used across desktop and mobile navigation. These settings reference menus created in your Shopify admin under Navigation.

<Tabs>
  <Tab title="Desktop & Mobile">
    ### Menu

    Select the primary Shopify menu used for desktop navigation. This is your main navigation structure.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/menu-desktop.png" alt="Primary menu setting" />

    ### Mobile menu

    Select a Shopify menu specifically for mobile navigation. If left empty, the primary menu is used.

    This allows you to simplify or restructure navigation for smaller screens.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/menu-mobile.png" alt="Mobile menu setting" />

    <Tip>
      Create a simplified mobile menu with fewer top-level items for better usability on small screens.
    </Tip>
  </Tab>

  <Tab title="Drawer">
    ### Submenu

    Select a Shopify menu that appears only inside the navigation drawer. This menu is not shown in the main header navigation.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/submenu-drawer.png" alt="Submenu for drawer" />

    ### Mobile menu card column count

    Controls how many columns are used for card-based menu items on mobile.

    **Available options:**

    * **1 column** - Stacked layout for maximum readability
    * **2 columns** - Compact layout showing more items at once

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/mobile-card-columns.png" alt="Mobile menu card columns" />
  </Tab>
</Tabs>

## Mega menu settings

These settings control the appearance and spacing of mega menu layouts. Mega menus appear when hovering over top-level navigation items on desktop.

<Tabs>
  <Tab title="Typography">
    ### Parent link size

    Controls the size of top-level menu item labels inside the mega menu.

    **Available options:** S, M, L

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/megamenu-parent-size.png" alt="Parent link size options" />

    ### Parent without submenu link size

    Controls the size of parent links that do not contain submenus.

    **Available options:** S, M, L

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/megamenu-parent-no-submenu-size.png" alt="Parent without submenu size" />
  </Tab>

  <Tab title="Card layout">
    ### Spacing between cards

    Controls the spacing between *Image and text* card blocks inside the mega menu.

    **Available options:** No, S, M, L, XL

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/megamenu-card-spacing.png" alt="Mega menu card spacing" />

    ### Card aspect ratio

    Controls the aspect ratio of *Image and text* card blocks on desktop.

    **Available presets:** Auto, Square, Portrait, Landscape

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/megamenu-card-ratio-desktop.png" alt="Card aspect ratio for desktop" />

    ### Card aspect ratio for mobile

    Controls the aspect ratio of *Image and text* card blocks specifically for mobile devices.

    **Available presets:** Auto, Square, Portrait, Landscape

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/megamenu-card-ratio-mobile.png" alt="Card aspect ratio for mobile" />
  </Tab>

  <Tab title="Dropdown">
    ### Dropdown column width

    Controls the width of dropdown-style menus. This setting uses a range selector to fine-tune how wide dropdown menus appear.

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/release/header/megamenu-dropdown-width.png" alt="Dropdown column width setting" />

    <Note>
      Wider dropdowns accommodate more content but may extend beyond the viewport on smaller screens.
    </Note>
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Keep navigation concise" icon="list">
    Limit top-level items to 5-7 to avoid overwhelming customers. Use mega menus for deeper structures.
  </Card>

  <Card title="Simplify mobile menus" icon="mobile">
    Create a dedicated mobile menu with fewer items and clearer hierarchy.
  </Card>

  <Card title="Reserve mega menus wisely" icon="grid">
    Use mega menus for categories with clear visual structure and multiple subcategories.
  </Card>

  <Card title="Test sticky headers" icon="arrows-up-down">
    Balance accessibility with screen space, especially on mobile devices.
  </Card>
</CardGroup>

<Warning>
  Custom SVG code requires technical knowledge. Test thoroughly across browsers before deploying to ensure consistent rendering.
</Warning>

## Related guides

<CardGroup cols={2}>
  <Card title="Announcement bar" icon="bullhorn" href="/themes/release/announcement-bar">
    Configure announcement messages above the header
  </Card>

  <Card title="Footer section" icon="rectangle-vertical" href="/themes/release/footer">
    Set up footer navigation and content blocks
  </Card>
</CardGroup>