The header appears on every page of your store and controls your logo, navigation menus, search, account, and cart.
Overview
The Header section is a global section that spans every page of your store. It displays your logo, desktop navigation links, and action buttons for search, account, and cart. Arrange the header separately for desktop and for tablets and phones, make it transparent on top of hero images for a full-bleed look, and extend the navigation with rich promotional content using megamenu blocks.
Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Header color scheme | Color scheme | Default | Background and text color of the header bar. |
| Full width | Toggle | On | Extends the header edge to edge across the page. |
| Layout | Select | Logo center, menu left | Position of the logo and navigation links on desktop. Options: Logo left, menu center; Logo left, menu left; Logo center, menu left; Logo center, menu center. |
| Tablet and mobile layout | Select | Menu and logo left | Arrangement of the header on screens narrower than 1024 px. Options: Menu and logo left, Logo left, Logo center. |
| Sticky header | Select | Always | How the header behaves when the page scrolls. None lets it scroll away, Always keeps it visible, On scroll up hides it when scrolling down and shows it again when scrolling up. |
| Show as icons | Toggle | On | Shows Cart, Account and Search as icons. Turn off to show them as text. |
| Country/Region button | Select | Neutral flag | Shows a country and language selector in the header. Options: Hide, Globe, Neutral flag, Country flag, Text. |
| Use shadow | Toggle | On | Adds a subtle shadow below the header to separate it from the page content. |
Navigation
| Setting | Type | Default | Description |
|---|---|---|---|
| Primary menu | Menu | main-menu | The main navigation menu. Top-level items appear as navigation links on desktop and fill the menu drawer. Supports up to three levels. |
| Top-level menu items shown on desktop | Range | 7 |
How many top-level menu items are shown as links on desktop. The rest are in the menu drawer. |
| Secondary menu | Menu | — | An optional extra menu shown only in the menu drawer. |
| Desktop submenu type | Select | Drawer | How submenus open on desktop: a side Drawer or a Dropdown below the link. Tablets and phones always use the drawer. |
| Desktop submenu width | Select | Full | Width of submenu panels in the desktop drawer. With Single column, submenus stay as wide as the main drawer and megamenu columns stack. Shown when Desktop submenu type is Drawer. |
Dropdown overlay
Shown when Desktop submenu type is Dropdown. The overlay tints and blurs the page behind an open dropdown menu, so the menu stands out.
| Setting | Type | Default | Description |
|---|---|---|---|
| Dropdown overlay color | Select | Color scheme overlay | Color of the tint. Color scheme text lightens the page on dark color schemes and darkens it on light ones. Options: Color scheme overlay, Color scheme text, Custom. |
| Custom dropdown overlay color | Color | #000000 |
The tint color when Dropdown overlay color is Custom. |
| Dropdown overlay opacity | Range | 30% |
Strength of the tint. Set to 0 to turn the tint off. |
| Dropdown overlay blur | Range | 4 px |
How much the page behind the dropdown is blurred. Set to 0 to turn the blur off. |
Logo
| Setting | Type | Default | Description |
|---|---|---|---|
| Logo image | Image | — | Your store logo. A .png or .svg with a transparent background is recommended. Without an image, the store name is shown as text. |
| Desktop logo width | Range | 120 px |
Maximum logo width on desktop. |
| Desktop padding | Range | 15 px |
Space above and below the logo on desktop. |
| Mobile logo width | Range | 100 px |
Maximum logo width on tablets and phones. |
| Mobile padding | Range | 5 px |
Space above and below the logo on tablets and phones. |
Transparent header
| Setting | Type | Default | Description |
|---|---|---|---|
| Overlay header over home page | Toggle | Off | Makes the header transparent on top of the first section of the home page. |
| Overlay header over collection pages | Toggle | Off | Makes the header transparent on all collection pages. |
| Overlay header on pages | Text area | — | Handles of other pages where the header is transparent, one per line. |
| Overlay header text color | Select | Foreground | Text and icon color of the transparent header. Foreground uses the color scheme text color, Background uses the background color, which reads well over dark images. |
| Overlay header logo | Image | — | A second logo for the transparent header, used when Overlay header text color is Background. Use the same image size and file format as the main logo. |
Menu drawer logo
| Setting | Type | Default | Description |
|---|---|---|---|
| Logo | Select | No logo | Logo shown in the menu drawer. Options: No logo, Use header logo, Use overlay logo, Separate logo. |
| Drawer logo image | Image | — | The logo for the drawer when Logo is Separate logo. |
| Drawer logo max width | Range | 100 px |
Maximum width of the logo in the drawer. |
Tablet and mobile layout
On screens narrower than 1024 px, the header follows the Tablet and mobile layout setting instead of the desktop Layout. The menu and cart buttons are always shown. Search and account are shown when they're turned on.
| Option | Header on tablets and phones |
|---|---|
| Menu and logo left (default) | Menu button and logo on the left, search, account and cart on the right. |
| Logo left | Logo on the left, the menu button next to search, account and cart on the right. |
| Logo center | Menu and search on the left, logo in the center, account and cart on the right. Without the account button, search moves to the right side. |
Setup
Steps
- From your Shopify admin, go to Online Store → Themes.
- Click Customize next to your active theme.
- In the left sidebar, click Header.
- Select your Primary menu under Navigation.
- Choose a Layout for desktop and a Tablet and mobile layout for smaller screens.
- Choose how the header behaves on scroll with Sticky header.
- Upload your logo under Logo and adjust its width and padding.
- If your home page starts with a full-bleed hero image, turn on Overlay header over home page and set the Overlay header text color to suit the image.
- Click Save.
If your logo is hard to read over a dark hero image, upload a light version of it as the Overlay header logo and set Overlay header text color to Background. The theme swaps the logos automatically on transparent header pages.
Mega menu
Add promotional images, products and column layouts inside your navigation with Header section blocks. Both the Drawer and Dropdown submenu types show megamenu content.
There are three block types:
- Megamenu with banners — promotional images, each with an optional title and link, shown next to the submenu links.
- Megamenu with products — a list of products shown next to the submenu links, from a collection or picked by hand.
- Megamenu with columns — columns with images and links. Useful for visual category navigation.
Each block has a mandatory Parent menu item title setting. Enter the exact title of the top-level menu item the block should appear under. The value is case-sensitive. Read more in Mega menu setup.
Menu item formatting
The theme recognises three special title patterns that change how a menu item is displayed. Enter them directly in Shopify's menu editor as part of the item's title — no code required.
(See Shopify's guide to editing menus for how to create and edit menu items.)
Dividers (drawer only)
Create a menu item whose title is exactly --- (three dashes). The theme replaces it with a visual divider line, which is useful for grouping long lists in the drawer. Divider items are skipped in the desktop navigation links.
Badges
Add :::badge-name after the item title to display a small badge label next to the link — for example, New Arrivals:::new displays the link as "New Arrivals" with a "new" badge. The badge name is lowercased and applied as a style. Badges appear in both the desktop navigation and the drawer.
Emphasized links
Add *** anywhere in the item title — for example, ***Sale — to display the link in an emphasized style. The *** characters are removed from the visible title. Emphasis applies in both the desktop navigation and the drawer.
Search
Search is controlled in Theme settings. When enabled, a search button appears in the header. Clicking it opens a search panel where customers can type a query, and predictive results appear as they type.
Configure suggested search terms in Theme settings → Search → Search recommendations — enter each term on its own line. These appear in the panel before the customer starts typing.
Keep shoppers moving with smart navigation
A fixed header with visible cart and account shortcuts reduces the steps between browsing and checkout. Surfacing your most important collections as top-level navigation links means customers reach product pages in one click, without opening the full drawer.
Reinforce your brand at every scroll
A transparent header over a full-bleed hero image gives your store a premium, editorial feel. Pair it with an overlay header logo to ensure your branding stays crisp whether the header sits above a light or dark image.
Updating from an earlier Taiga version
Check the header on tablets and phones after updating to Taiga 9.0.0
The header on tablets and phones no longer follows the desktop Layout setting. It uses the new Tablet and mobile layout setting, which is Menu and logo left by default. If your desktop layout centers the logo and you want to keep it centered on smaller screens, choose Logo center.
Renamed settings
The overlay settings are now under the Transparent header heading, so they're easier to tell apart from the dropdown overlay. Your settings are kept.
Advanced
This section is intended for developers customising the theme. No changes here are required for normal use.
Transparent header on custom pages
The Overlay header on pages text area accepts Shopify page handles, one per line. Internally, the Liquid uses newline_to_br and then splits on <br /> to build the list. Template-name matching is limited to index and collection — all other page types require an explicit handle entry in this field.
Menu item title patterns
All three special title patterns (---, :::badge-name, ***) are parsed in shortcut-menu.liquid (desktop navigation) and drawer-menu-items.liquid (drawer). The --- pattern causes the item to be skipped entirely in the shortcut menu and replaced with an <hr> in the drawer. The ::: split and *** removal happen before the item title is passed to the rendered link element, so the raw syntax never reaches the DOM.
Sticky header data attribute
The sticky scroll logic is driven by data-sticky-behavior on <header id="MainHeader">. JavaScript reads this attribute at runtime. Valid values: none (None), fixed (Always), scroll (On scroll up).
Tablet and mobile layout classes
The header element gets a mobile-layout--{value} class (menu-logo-left, logo-left or logo-center). Below 1024 px the left, center and right header columns are flattened with display: contents, and the class places the logo and buttons. logo-center uses a one-row grid so the logo stays centered on the whole header whichever buttons are shown. The styles are in critical.css.