Desktop Header
A simple, non-technical guide to the Desktop Header of your theme — the top bar that shoppers see on computers and laptops. This guide also covers the Mega Menus (the large dropdown panels) that attach to your navigation.
Note
️ This theme uses separate sections for desktop and mobile. This document covers the desktop experience. For phones and tablets, see mobile-header.md.
1. What is the Desktop Header?
The Desktop Header is the main navigation bar at the top of your store on larger screens. It typically contains:
- Your logo
- Your main menu (navigation links), which can open simple dropdowns or rich mega menus
- A search icon (opens a search box with live suggestions)
- An account/login icon
- A cart icon (opens a slide-out cart)
- Optionally a country/language selector and a light/dark theme switch
It can be made sticky (stays visible as you scroll) and even transparent so it floats over a hero image at the top of a page.
2. Key Features at a Glance
- ✅ Flexible layout — place the logo on the left or center; the menu left, center, or right.
- ✅ Two menu rows — keep the menu beside the logo, or move it to its own row underneath.
- ✅ Rich mega menus — large dropdown panels with tabs, images, featured products, promos, and even a store-locator map.
- ✅ Menu badges — add labels like "New" or "Sale" to any menu item.
- ✅ Live search — a search box with instant product suggestions as you type.
- ✅ Slide-out cart — clicking the cart opens a drawer with a free-shipping progress bar and product upsells.
- ✅ Sticky header — keep the header visible on scroll (always, or only when scrolling up).
- ✅ Transparent header — overlay the header on a full-screen hero, then turn solid on scroll.
- ✅ Light & dark mode colors — separate color sets for each.
- ✅ Logo width control and light/dark/transparent logo variants.
3. Where to Find It in the Theme Editor
- Go to Online Store → Themes → Customize.
- Open the Header group at the top of the section list.
- Click Desktop Header.
Inside, you'll find the section settings (logo, menu, layout, colors, etc.) and a list of Menu item blocks you can add for custom links and badges.
4. Customization Options
The settings are grouped just like they appear in the editor.
Logo
| Setting | What it does |
|---|---|
| Logo (light) | Your main logo image for light backgrounds. |
| Logo (dark) | An alternate logo used when your store is in dark mode. |
| Logo width | How wide the logo appears (100–250 pixels). |
| Position | Place the logo on the left or in the center of the header. |
Menu
| Setting | What it does |
|---|---|
| Select menu | Choose which Shopify navigation menu the header uses. (Menus are built in **Online Store → Navigation**.) |
| Position | Align the menu left, center, or right. |
| Enable menu slider | If your menu is long, this lets it scroll sideways instead of wrapping. |
| Slider arrows | Show arrows for the sliding menu. |
| Row | Keep the menu on the same row as the logo (Top), or move it to its own row underneath (Bottom). |
| Bottom menu colors & border | When the menu is on its own row, set its background, text color (light & dark), and an optional dividing border. |
General settings
| Setting | What it does |
|---|---|
| Shadow | Adds a subtle drop shadow under the header. |
| Font weight | How bold the menu text is (100 = thin, 900 = very bold). |
| Header width | Wide (full edge-to-edge) or Narrow (a contained, "floating" style). |
| Width type (Narrow only) | Full, Page, or a Fixed pixel width. |
| Fixed width (Narrow + Fixed) | Exact width in pixels. |
| Border radius (4 corners) (Narrow only) | Round each corner of the floating header independently. |
| Overlap content on [page types] (Narrow only) | Let the narrow header float over the top of a page (great with a full-height hero). Available per page type: Home, Collection, Product, Collections list, Blog, Blog post. |
Sticky behavior
| Setting | What it does |
|---|---|
| Sticky | None (header scrolls away), On scroll up (hidden as you scroll down, reappears when you scroll up), or **Always** (always stays at the top). |
Header transparency (Wide width only)
Makes the header sit on top of the first section with no background — ideal over a large hero image. It turns solid once the shopper scrolls.
| Setting | What it does |
|---|---|
| Transparent on [page type] | Turn transparency on per page type: Home, Collection, Product, Collections list, Blog, Blog post. |
| Transparent content color (light/dark) | The color of the logo/menu/icons while transparent (so they stay readable over your image). |
| Transparent logo (light/dark) | A special logo shown while the header is transparent. Falls back to your regular logo if left empty. |
Search
| Setting | What it does |
|---|---|
| Search icon | Show or hide the search icon. |
Localization
| Setting | What it does |
|---|---|
| Show country selector | Let shoppers choose their country/region (requires markets/multi-currency set up in Shopify). |
| Show country flag | Display a flag next to the country selector. |
| Show language selector | Let shoppers switch languages (requires translated content). |
| Localization position | Place these selectors on the left or right. |
Customer account
| Setting | What it does |
|---|---|
| Account icon | Show or hide the account/login icon. *(Only appears if customer accounts are enabled in your store.)* |
Header spacing & colors
| Setting | What it does |
|---|---|
| Top / Bottom padding | Space above and below the header content. |
| Background & content color (light mode) | Header background and text/icon colors for light mode. |
| Background & content color (dark mode) | The same, for dark mode. |
5. Menu Items, Images & Badges (Blocks)
Beyond the menu you pick under Menu → Select menu, you can add up to 50 custom "Menu item" blocks directly in the header. Each block can have:
| Setting | What it does |
|---|---|
| Menu text | The label shown in the header. |
| Menu link | Where it goes when clicked. |
| Open in new window | Opens the link in a new browser tab. |
| Sub-menu | Attach a Shopify menu to create a dropdown of child links. |
| Image + Position | Show a small image beside the item (left or right). |
| Badge text | A small label like "New", "Sale", or "Hot". |
| Badge position & offset | Where the badge sits (top/bottom/left/right) and fine-tuned positioning. |
| Badge colors (light/dark) | Background and text colors for the badge. |
Tip
Badges are a great, low-effort way to draw attention to a new collection or a sale link.
6. How the Mega Menus Work
A mega menu is a large, designed dropdown panel that opens from a top-level menu item — far richer than a plain list of links. This theme includes four mega-menu styles, each added as its own section inside the Header group:
| Mega menu type | What it's good for |
|---|---|
| Tabbed columns | A sidebar of tabs that switch between sets of link columns. Great for big catalogs. |
| Content cards | Tabs plus columns that can hold link lists, images, a featured product, or a promo banner. |
| Product showcase | Promo links down one side, category tabs across the top, and a swapping grid of featured products. |
| Store locator | A map (Google Maps), a store address card, and a contact form. |
How a mega menu connects to a menu item—important!
A mega menu attaches to a menu item by matching its name. In each mega-menu section there's a "Link label" (menu link title) field. Whatever you type there must exactly match the name of a top-level item in your header menu.
Example: If your menu has a top item called "Shop", set the mega-menu section's Link label to "Shop". Now hovering/clicking "Shop" opens that mega menu.
Warning
️ If the names don't match exactly, the mega menu won't appear — the menu item will just show its normal dropdown (or nothing). This is the #1 cause of "my mega menu isn't showing."
What you can put inside a mega menu
- Tabs with labels and icons
- Multiple columns of links (pulled from your Shopify menus)
- Images with captions and links
- Featured products (pick a specific product to highlight)
- Promo banners with a heading, subtitle, and call-to-action button
- A store map + contact form (Store locator style)
Each mega-menu section also has its own settings for how it opens (on hover or on click), whether to show a dimming backdrop, dividers, a sidebar, layout columns, spacing, and light/dark colors.
7. Search, Account & Cart
Search
Clicking the search icon opens a search box that shows live suggestions as you type (products and pages), so shoppers find things quickly without leaving the page.
Account
The account icon links to login/account pages. It only appears if customer accounts are enabled in your Shopify settings and the "Account icon" toggle is on.
Cart
Clicking the cart icon opens a slide-out cart drawer (it doesn't jump to a separate cart page). The drawer includes:
- A live item count on the icon,
- A free-shipping progress bar ("You're $X away from free shipping"),
- Upsell product suggestions,
- Quick quantity and remove controls.
Note
️ The cart drawer's colors and upsell layout are set in your global Theme Settings (not inside the Desktop Header section).
8. Desktop vs. Mobile
This section controls the desktop view only. On phones and tablets, a separate Mobile Header takes over with a hamburger menu and a slide-in navigation drawer. Your logo and the same Shopify menus are reused, but layout, sizing, and the mega-menu experience are configured separately in the Mobile Header and Mobile mega menu sections. See mobile-header.md.
9. Things to Know (Dependencies & Limits)
- Mega menus require an exact name match between the mega-menu section's Link label and a top-level menu item.
- Navigation menus are created in Online Store → Navigation — the header just chooses which one to display.
- Account icon needs customer accounts enabled in Shopify.
- Country/language selectors require Shopify Markets / translations to be set up; otherwise they have nothing to switch between.
- Dark mode colors only matter if your theme's dark mode is enabled.
- Transparency is available on the Wide header; the floating overlap option is on the Narrow header — you won't see both at once.
- Up to 50 custom menu-item blocks.
- Many settings appear/disappear based on other toggles (e.g., border-radius only shows on Narrow width). This is expected.
10. Best Practices
- ✅ Keep your top menu concise (around 5–7 items) so it looks clean and fits without crowding.
- ✅ Name mega-menu sections carefully to match your menu items exactly — copy/paste the menu item name to be safe.
- ✅ Upload a clear logo and set a sensible width; provide a transparent logo if you use the transparent header over images.
- ✅ Use the transparent header with a full-height hero for a premium look; check that the transparent text color is readable over your image.
- ✅ Use badges sparingly — one or two "New"/"Sale" labels stand out; ten do not.
- ✅ Preview on a real screen after changing layout, sticky, or transparency settings.
11. Common Questions & Troubleshooting
Q: My mega menu won't open / doesn't show. The mega-menu section's Link label must exactly match the top-level menu item's name (capitalization and spelling). Fix the name and it will connect.
Q: My menu is too long and wraps awkwardly. Turn on Enable menu slider so the menu scrolls sideways, or shorten the menu, or move it to its own Bottom row.
Q: A setting I was looking for vanished. Settings show/hide based on other choices. For example, border-radius appears only when Header width = Narrow; transparency options appear only on Wide. Re-check the related toggle.
Q: The account icon isn't showing. Make sure customer accounts are enabled in Shopify and the Account icon toggle is on.
Q: The country or language switcher is empty. You need Shopify Markets (for currencies/countries) and/or translations (for languages) configured first.
Q: The cart opens a full page instead of a drawer. The drawer relies on the storefront's scripts. If you're previewing in an unusual context it may fall back to the cart page; check on the live store.
Q: My logo looks too big or too small. Adjust Logo width under Logo settings. There are separate logos for light, dark, and transparent states.
12. Summary
The Desktop Header is the command center of your store's navigation on computers. You can:
- Position your logo and menu flexibly (and use a second menu row),
- Build powerful mega menus (tabs, images, products, promos, or a store map) that attach to menu items by matching names,
- Add badges to highlight links,
- Offer live search, an account link, and a slide-out cart with free-shipping and upsells,
- Make the header sticky or transparent, with full light/dark color control.
The single most important rule: mega-menu names must exactly match your menu items. Get that right, keep the menu tidy, and your desktop header will look professional and work smoothly.