To set up a mega menu in the Shopify Vessel theme, create a multi-level menu under Online Store → Navigation with nested second- and third-level links. Vessel, built on Shopify’s Horizon architecture, automatically displays any top-level item with nested links as a full-width mega menu — no app or toggle required.

Vessel is one of the most beautiful free themes Shopify has ever released — clean, calm, modern, with that spacious editorial look that makes products feel premium. It’s part of Shopify’s new Horizon theme family, built on a completely modular block architecture that gives you more editor control than any previous generation of themes.

But that new architecture is exactly where store owners get stuck.

If you’re coming from Dawn or another older theme, you’ll go hunting for the familiar “Desktop menu type: Mega menu” toggle in the header settings… and it isn’t there. Search the theme editor, dig through every setting — nothing labeled “mega menu.” So you assume Vessel doesn’t support one, and you start browsing $10-a-month menu apps.

Here’s the truth: Vessel doesn’t have a mega menu toggle because the mega menu is the default. In Horizon-family themes like Vessel, any top-level menu item that contains nested links automatically expands into a full-width mega menu panel. There’s no switch to flip — the whole setup happens in your navigation structure, not in a theme setting.

Once you understand that one shift, everything clicks. In this tutorial, I’ll walk you through the complete process: building the right menu structure, understanding how Vessel renders it, customizing the mega menu’s look through the header’s block settings and custom CSS, enriching it with visual content, and fixing the layout problems that trip up almost everyone new to Horizon themes.

As a Shopify developer who works with the Horizon theme family regularly, I’ll also share the CSS snippets I actually use on client stores. Let’s set it up.

Table of Contents

• Vessel and the Horizon Theme Family: Why the Menu Works Differently
• What You Need Before Starting
• Step 1: Build a Multi-Level Navigation Menu
• Step 2: Assign the Menu to Vessel’s Header
• Step 3: Preview — Your Mega Menu Is Already Live
• Step 4: Customize the Mega Menu’s Appearance
  • Header Block Settings
  • Custom CSS Tweaks (Copy-Paste)
• Step 5: Add Visual Content to the Mega Menu
• Step 6: Check the Mobile Menu
• Vessel Mega Menu vs. Dawn Mega Menu: Quick Comparison
• Best Practices for a High-Converting Mega Menu
• Common Mistakes to Avoid
• Troubleshooting Vessel Mega Menu Problems
• FAQ
• Conclusion

Vessel and the Horizon Theme Family: Why the Menu Works Differently

A little context makes everything easier to follow.

In 2025, Shopify introduced Horizon — a new theme architecture built around nested theme blocks, where nearly every element of a page is a draggable, configurable block in the editor. Alongside the flagship Horizon theme, Shopify released a family of free presets built on the same foundation: Vessel, Ritual, Fabric, Tinker, Dwell, and others.

That architecture changes how navigation works in three important ways:

1. The header menu is a block, not a fixed setting panel. You configure it by clicking into the Header section’s menu block in the theme editor.
2. Mega menu rendering is automatic. If a top-level link has children, Vessel expands it into a full-width panel. If it has no children, it’s a plain link. There is no dropdown/mega toggle like Dawn’s.
3. Customization happens through block settings and custom CSS, both available right inside the theme editor — often without touching code files at all.

So the “setup” isn’t about enabling a feature. It’s about feeding Vessel the right menu structure and then styling what it builds for you.

What You Need Before Starting

• A store running the Vessel theme (this guide applies to all Horizon-family themes — Horizon, Ritual, Fabric, Tinker, Dwell — with only cosmetic differences)
• Collections created for your main categories, ideally each with a featured image
• 20–30 minutes

If you plan to add custom CSS or touch any code, duplicate your theme first: Online Store → Themes → ⋯ → Duplicate. For the pure theme-editor steps, you’re not changing code, but working on a copy is still the professional habit.

One more tip: Horizon themes are updated frequently by Shopify. Before starting, check whether an update is available for Vessel — newer versions have refined the menu behavior and settings, and you want to build on the latest one.

Step 1: Build a Multi-Level Navigation Menu

Everything about your mega menu — the columns, the headings, the links — comes from your navigation structure. Vessel reads it like this:

• Level 1 → the links in your header bar (e.g., Shop, Collections, About)
• Level 2 → the column headings inside the mega menu panel (e.g., Men, Women, Accessories)
• Level 3 → the individual links listed under each column heading (e.g., T-Shirts, Hoodies)

Set it up:

1. Go to Online Store → Navigation
2. Click your Main menu
3. Click Add menu item for each Level 1 link, and link it to a collection or page
4. To nest an item, add it, then drag it slightly to the right underneath its parent until it indents
5. Repeat one level deeper for Level 3 links
6. Click Save menu

Example structure for a home goods store:

Shop
├── Kitchen (→ Kitchen collection)
│   ├── Cookware
│   ├── Utensils
│   └── Storage
├── Living Room (→ Living Room collection)
│   ├── Cushions
│   ├── Throws
│   └── Lighting
└── Bedroom (→ Bedroom collection)
    ├── Bedding
    └── Decor

Two rules that save headaches later:

• Link Level 2 items to real collections, not “#” placeholders. Clickable column headings are better UX, better SEO, and they unlock collection imagery.
• Use one single menu containing your entire structure. Don’t create separate menus per dropdown — Vessel builds the whole mega menu from one nested menu.

Step 2: Assign the Menu to Vessel’s Header

Usually your Main menu is assigned by default, but confirm it:

1. Go to Online Store → Themes → Customize on Vessel
2. Click the Header section in the sidebar
3. Inside the Header, click the Menu block (Horizon headers are built from blocks — you’ll see entries like logo, menu, search, cart)
4. Check the Menu picker is set to your Main menu
5. Click Save

Depending on your Vessel version, the menu block’s settings panel may also show options for menu position, spacing, text style, and the color scheme used by the expanded panel — we’ll come back to those in Step 4.

Step 3: Preview — Your Mega Menu Is Already Live

Open your store preview and hover over (or click) your “Shop” link.

Because it contains nested links, Vessel expands it into a full-width mega menu: your Level 2 items appear as column headings across the panel, with Level 3 links listed beneath each one. Top-level items without children stay as simple links.

That’s the core setup — done, with zero code and zero apps. What remains is making it look exactly the way you want, which is where Vessel gives you more room than older themes.

Step 4: Customize the Mega Menu’s Appearance

Header Block Settings

Click into the Header section and its menu block in the theme editor and explore the available settings. Depending on your Vessel version you can typically control things like:

• Color scheme for the header and the expanded menu panel (Horizon themes use reusable color schemes — set a dedicated scheme for the menu if you want the panel to contrast with the header bar)
• Menu width / section width for how far the panel stretches
• Typography and spacing inherited from your theme settings — heading and body styles applied to menu levels

Because Shopify iterates on Horizon themes frequently, don’t be surprised if your settings panel has more (or slightly relabeled) options than a tutorial screenshot from months ago. The concepts stay the same: the menu is a block, and its look is controlled from the editor.

Custom CSS Tweaks (Copy-Paste)

Here’s the good news for anything the settings don’t cover: Horizon themes include a Custom CSS field right in the theme editor — no code files needed.

1. In the theme editor, click the Header section
2. Scroll to the bottom of its settings and open Custom CSS
3. Paste any of the snippets below

Make Level 2 column headings bold (the most requested tweak in the Shopify community):

css

a.mega-menu__link.mega-menu__link--parent {
  font-weight: 700;
}

Add breathing room between columns:

css

.mega-menu {
  --menu-horizontal-gap: 48px;
}

Slightly smaller, softer Level 3 links:

css

.mega-menu__link:not(.mega-menu__link--parent) {
  font-size: 0.95em;
  opacity: 0.85;
}

.mega-menu__link:not(.mega-menu__link--parent):hover {
  opacity: 1;
}

Add a subtle divider and padding to the panel:

css

.mega-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

One caution: class names can shift between Horizon versions. If a snippet doesn’t take effect, right-click your mega menu in Chrome → Inspect, confirm the current class names, and adjust. The selectors above match the current Horizon codebase at the time of writing.

Step 5: Add Visual Content to the Mega Menu

A text-only mega menu is functional; images make it sell. You have two routes in Vessel:

Route 1 — Editor blocks (check your version first). The Horizon family is steadily expanding what you can drop into menus from the editor — some Horizon-based themes let you feature collections or promotional content within the expanded menu area directly through blocks. Click into your header’s menu block and look for an option to add child blocks or featured content per menu item. If your Vessel version offers it, this is the cleanest path: pick a collection or image, position it, done.

Route 2 — Collection images via code (works everywhere). If your version doesn’t yet offer visual menu blocks, you can render each Level 2 collection’s image with a small code addition, the same concept I use across theme families:

1. Online Store → Themes → ⋯ → Edit code (on your duplicate)
2. Open the header menu file — in Horizon-family themes look in the Blocks folder for _header-menu.liquid
3. Find the loop that outputs second-level links, and just before the link title output, add:

liquid

{%- if childlink.type == 'collection_link' and childlink.object.image -%}
  <img
    src="{{ childlink.object.image | image_url: width: 360 }}"
    alt="{{ childlink.title | escape }}"
    class="mega-menu__thumb"
    width="360"
    height="{{ 360 | divided_by: childlink.object.image.aspect_ratio | round }}"
    loading="lazy"
  >
{%- endif -%}

4. Then in the header’s Custom CSS field:

css

.mega-menu__thumb {
  display: block;
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.8rem;
}

Fair warning on Route 2: Horizon’s menu file is more complex than Dawn’s (it handles both desktop and mobile rendering in one block), and Shopify updates it often. Keep a copy of your edit, expect to re-apply it after theme updates, and if you’re not comfortable in Liquid, Route 1 or a hired developer is the saner path.

Step 6: Check the Mobile Menu

Vessel automatically converts your navigation into a mobile drawer — same structure, tap-to-expand levels. Nothing extra to configure, but always verify:

• Open your store on a phone (or the editor’s mobile preview)
• Tap the hamburger icon and expand each level
• Confirm every link works and the nesting matches your desktop menu

Horizon’s mobile drawer is one of its strengths — it keeps your full structure intact without any additional setup.

Vessel Mega Menu vs. Dawn Mega Menu: Quick Comparison

If you’ve used Dawn before, here’s the mental remapping:

The takeaway: Vessel demands less setup but rewards understanding its block system. Once you stop looking for Dawn’s toggle, it’s actually the easier theme.

Best Practices for a High-Converting Mega Menu

Keep it to 3–6 columns. Vessel’s aesthetic is calm and spacious — a cramped 10-column menu fights the theme’s whole design language. Group small categories under broader Level 2 headings.

Lead with revenue. Columns read left to right; your best-selling category earns the first position.

Make every heading clickable. Level 2 items linked to collections give shoppers a “see all” path and give Google clean internal links to your money pages.

Use plain, searchable labels. “Bedding” beats “Sleep Sanctuary.” Menu labels are both wayfinding and keyword signals.

Match the panel’s color scheme deliberately. Horizon’s color schemes make it easy to give the menu panel a subtle contrast against the page — a light gray panel on a white site reads as intentional design.

Revisit quarterly. Your menu should evolve with your catalog and your bestseller data, not stay frozen at launch.

Common Mistakes to Avoid

1. Hunting for a “mega menu” setting that doesn’t exist. In Vessel, structure is the setting. Nest your links and the mega menu appears.
2. Creating separate menus for each dropdown. Vessel reads one nested menu. Multiple fragmented menus won’t merge into a mega menu.
3. Only two levels of links. One level of children makes a modest dropdown-style panel; the classic column layout needs Level 3 links under Level 2 headings.
4. Skipping theme updates. Horizon themes improve monthly. Running a six-month-old Vessel means missing menu refinements (and the fixes for early quirks).
5. Heavy code customization without documentation. Horizon files change with updates. Every custom edit you make should live in a note or repo you can re-apply in minutes.
6. Ignoring mobile verification. The drawer usually “just works,” but a broken Level 3 nest on mobile silently costs sales — check it after every menu change.

Troubleshooting Vessel Mega Menu Problems

Hovering shows nothing — no panel opens. The top-level item has no nested children. Go back to Navigation and confirm your sub-items are actually indented under the parent (they should appear visually inset), then save the menu.

The panel opens but looks like a plain list, not columns. You have two levels but not three. Add Level 3 links under your Level 2 headings — that’s what creates the column layout.

The mega menu looks scattered or misaligned on desktop. This was a known pain point in early Horizon versions. First, update Vessel to the latest release — layout fixes ship regularly. If it persists, check for conflicting custom CSS in the header’s Custom CSS field or in any edited files, and test with those temporarily removed.

I want a small dropdown instead of a full-width panel for one item. Horizon renders nested items as a full-width mega menu by design; there’s no per-item dropdown toggle. Workarounds are limited: reduce that item’s structure to fewer links (it will still be a panel, just lighter), restyle the panel width with CSS, or accept the design pattern — it’s core to how the theme family works.

My CSS snippet does nothing. Class names may differ in your version. Inspect the live menu element in your browser’s dev tools, confirm the actual class names, and adapt the selector. Also make sure the CSS is in the Header section’s Custom CSS field (or theme-wide Custom CSS), not a different section’s.

My code customization vanished. A theme update replaced the file. This is why every edit gets documented — re-apply from your saved copy. For long-term stability, prefer editor-based customization (settings + Custom CSS) over file edits wherever possible.

Menu changes aren’t showing on the live site. You edited a draft or duplicate theme. Check which theme is published, and clear your browser cache or view in incognito.

FAQ

1. Does the Shopify Vessel theme support a mega menu? Yes — natively and by default. Any top-level menu item with nested links automatically expands into a full-width mega menu panel. No app, no code, no toggle.

2. Where is the mega menu setting in Vessel? There isn’t one, and that confuses everyone coming from Dawn. Vessel (like all Horizon-family themes) renders the mega menu automatically from your navigation structure. You control it by structuring your menu, not by flipping a setting.

3. How many menu levels does Vessel support? Three: header links, column headings, and links under each heading. That three-level structure is what produces the classic multi-column mega menu layout.

4. Can I add images to the Vessel mega menu? Yes. Depending on your Vessel version, you may be able to add featured collections or visual content through the header’s menu block in the editor; otherwise, a small Liquid edit can pull each collection’s image into the panel (code included in this guide).

5. Can I turn OFF the mega menu and use a small dropdown instead? Not with a setting — full-width panels are core to Horizon’s design. You can lighten a panel by reducing its nested links or restyle it with CSS, but there’s no per-item dropdown mode like older themes had.

6. Do I need an app for a mega menu on Vessel? No. The mega menu is built in. An app only makes sense for exotic features like tabbed menus or countdown timers inside the navigation.

7. Will this tutorial work on Horizon, Ritual, Fabric, Tinker, or Dwell? Yes. All Horizon-family themes share the same block architecture and menu behavior — only visual defaults differ between presets.

8. Why does my mega menu look broken or scattered on desktop? Usually an outdated theme version or conflicting custom CSS. Update Vessel first (Horizon themes ship fixes frequently), then test with custom CSS disabled to isolate the culprit.

9. How do I make the column headings bold? Add a.mega-menu__link.mega-menu__link--parent { font-weight: 700; } to the Header section’s Custom CSS field in the theme editor — no code files required.

10. Does the mega menu work on mobile? Yes. Vessel converts your full navigation into a tap-to-expand mobile drawer automatically, preserving all three levels.

11. Is a mega menu good for SEO? Generally yes — it creates a clear hierarchical structure and consistent internal links to your collection pages from every page of the site. Keep labels descriptive and the link count sensible.

12. Will my customizations survive Vessel theme updates? Editor-based changes (menu structure, block settings, Custom CSS) survive updates. Code file edits do not — keep copies and re-apply them after updating, or minimize file edits in Horizon themes specifically because they update often.

13. Can I show different menus in different areas of the header? The header’s menu block displays one assigned menu. Some Horizon versions allow additional menu or content blocks in the header — check your header’s “Add block” options, as this area of the theme evolves quickly.

14. My menu has nested links but no panel appears — what’s wrong? Re-open Online Store → Navigation and check the indentation: items must be visibly nested under their parent, and the menu assigned in the header block must be the one you edited. Those two mismatches cause almost every “no panel” case.

Conclusion

The Vessel mega menu isn’t hidden — it’s just built on a different philosophy. Where Dawn asks you to enable a feature, Vessel and the whole Horizon family read your navigation structure and build the mega menu for you. Nest your links three levels deep, assign the menu to the header block, and the full-width panel is live before you’ve touched a single setting.

From there, it’s refinement: use the header block’s settings and Horizon’s built-in Custom CSS field for styling, add collection imagery through editor blocks or the small code snippet in this guide, and always verify the mobile drawer. Keep your theme updated, document any code edits, and your navigation will stay solid through every Horizon release.

No app. No monthly fee. Just structure, a few settings, and maybe ten lines of CSS.

If you want to keep mastering the Horizon theme family, the resources below will help.

Keep Learning and Get Help

Prefer to follow along on video? Watch the full step-by-step walkthrough of this exact setup here: How to Set Up a Shopify Mega Menu in Vessel Theme — and subscribe for more Shopify theme tutorials: youtube.com/@foysalshopifyexpert

Want it built for you? If you’d rather have an expert configure your Vessel navigation — or handle any Shopify customization, Horizon theme work, or SEO project — hire me directly on Upwork: My Upwork Profile

Ready-made Shopify sections and blocks. I sell polished, plug-and-play Shopify code products — including blocks built specifically for the Horizon theme family — with one-time payment and no subscriptions: ecommercethesis.gumroad.com

Learn Shopify professionally. Turn theme skills like this into freelancing income with my structured course: Freelancing with Shopify — or browse all courses.

Stuck on a step? Reach me directly on WhatsApp for personal help: wa.me/8801991505652

Happy building — and enjoy your new Vessel mega menu.