Skip to main content
The header controls the primary navigation experience across your store. In Everest, it also acts as the connection point for search, customer account access, localization controls, extra utility icons, and mega menu promotions. Several visible header elements also depend on global theme settings such as your logo, search behavior, cart type, and social links. Once those dependencies are clear, the header becomes much easier to customize confidently. Header overview

​
What this section controls

  • Desktop header layout and menu placement
  • Sticky header behavior
  • Desktop dropdown or mega menu behavior
  • Menu trigger mode for desktop navigation
  • Country and language selectors
  • Customer avatar display
  • Two optional additional icon links
  • Header width, colors, and border treatment
  • Static mobile and slideout menu blocks
  • Mega menu promotion blocks

​
How Everest header works

The section renders three main zones:
  • Start area: mobile menu trigger and search
  • Center area: logo or text-based brand mark
  • End area: localization, additional icons, account, app blocks, and cart
Desktop navigation can render as either a dropdown menu or a mega menu. Mobile navigation uses a dedicated drawer block, while desktop also includes a separate slideout menu block for an additional drawer-style navigation experience.
The header also reads several global theme settings, especially for logo, search, cart, and social links. Those controls are documented later on this page so you can tell which behavior belongs to the section and which comes from theme settings.

​
Getting started

1

Open the Theme Customizer

In Shopify admin, go to Online Store -> Themes -> Customize.
2

Open the Header section

In the header group, select Header to access the main section settings.
3

Choose the layout and menu style

Start with header layout, menu trigger, and desktop menu type so the main navigation structure is in place first.
4

Review the static menu blocks

Open the built-in mobile and slideout menu blocks, then configure promotion blocks only if you are using the mega menu layout.
Header location in Theme Customizer

​
Layout options

Logo stays on the left and the main menu moves to a dedicated row below it.This layout gives longer menus more room and creates a clearer separation between branding and navigation.Header logo start menu below layout
Header navigation structure settings

​
Localization and account

Header localization and account settings
Displays the country selector in the header icon area when your store has more than one available country.The selector uses Shopify Markets data and renders a searchable country list when enough countries are available.
In the current header implementation, the country selector is rendered only on desktop screens.
Displays the language selector in the header icon area when your store has more than one available language.
In the current header implementation, the language selector is also desktop-only.
Changes how the account icon behaves when Shopify customer accounts are enabled.If enabled and the signed-in customer has an avatar, the avatar is shown. Otherwise the standard user icon is displayed.

​
Additional icons

Header additional icons settings
Turns on two optional desktop-only quick-link slots inside the header.These work well for actions such as Track order, Help center, or Store locator.
Each icon slot supports:
  • image icon
  • optional SVG override
  • text label
  • destination link
If SVG mode is enabled and SVG code is provided, the SVG overrides the uploaded image.
The second icon slot uses the same structure as the first one.Empty icon slots are skipped automatically, so you do not need to fill both.
Keep additional icons limited to one or two high-value actions. Too many icon links reduce the clarity of the header’s main navigation.

​
Design settings

Header width and border settings
Controls the header container width.Page keeps the header aligned to the theme’s standard content width.Fluid expands the header more generously while still respecting page gutters.Full stretches the header edge to edge.
Adds top, bottom, or dual borders using the shared section styling system.Available options are None, Top, Bottom, and Both.

​
Block settings

​
Global theme settings that affect the header

​
Best practices

Match layout to menu depth

Use menu below layouts when your store has longer top-level labels or more categories to scan.

Use mega menus selectively

Reserve the mega menu for categories that genuinely need multi-level navigation or promotional support.

Separate mobile priorities

Create a dedicated mobile menu instead of mirroring every desktop navigation choice one-to-one.

Keep utility icons focused

Use additional icons for one or two high-value actions so the header stays easy to parse.

Check localization requirements

Country and language selectors appear only when your Shopify Markets and language setup includes multiple options.

Review global logo settings

Unexpected logo behavior usually comes from Brand settings, not from the Header section itself.

Test sticky behavior

Review sticky header behavior on real devices, especially if your first viewport is already busy with navigation, search, and icons.

Map promotions carefully

Tie header promotions to the correct top-level menu position and verify them in mega menu mode before publishing.

Everest Introduction

Start with the theme overview and preset context before documenting other Everest sections.

Theme Icons

Review the shared icon reference used across DigiFist theme documentation.