---
title: Getting started with Navigator Mega Menu | Navigator
description: Getting started for the Navigator Mega Menu HubSpot module.
---

[Getting started](https://navigator.allgusto.com/docs/getting-started?hsLang=en)[Accessibility](https://navigator.allgusto.com/docs/accessibility?hsLang=en)[Changelog](https://navigator.allgusto.com/changelog?hsLang=en)

# Getting started with Navigator Mega Menu

Navigator Mega Menu is free. It builds your site header from a HubSpot navigation menu. You edit its links in menu settings (Settings \> Content \> Navigation menus, or open https://app.hubspot.com/l/menus), and the header updates by itself on every page without touching the module again. Column headings, columns and the mobile menu all come from the menu's levels.

## 1. Before you start

- A HubSpot account with Content Hub, and website pages, landing pages or a blog to put the header on.
- A navigation menu. If you have none yet, create one in menu settings (Settings \> Content \> Navigation menus). A good shape is:
    - top-level items: what sits in the header bar (Platform, Solutions, Pricing, Resources, Company);
    - second-level items: column headings inside a panel (for example Analyse, Automate, Connect);
    - third-level items: the links inside each column.
- Your logo in Settings \> Brand. The module uses it automatically.

## 2. Add the module to your header

Pick the path that matches how your site is built. You only need one.

### A. Themes with a drag and drop header (global content editor)

1. Open a page, click the header, and choose Edit global content.
2. Add Navigator Mega Menu to the header area. Remove or hide the theme's own menu module if there is one.
3. Publish the global content. Every page that uses that header now shows the new menu.

### B. Coded themes (`` tag)

Add the module tag to your header partial, usually `templates/partials/header.html`:

```

```

Copy the exact path from Design Manager rather than typing it: open Design Manager, find the module under @marketplace, right-click it and copy the path.

### C. Themes with their own header you want to replace (header takeover)

Add the module where your theme allows modules near the top of the page (a global group, a header partial or the first section of a template). Then hide the theme's own header with a short CSS rule in your theme's child stylesheet or the page's head HTML:

```
/* Hide the theme's own header; Navigator Mega Menu replaces it. */
.your-theme-header {
  display: none !important;
}
```

Replace `.your-theme-header` with your theme's header element. Your browser's inspect tool shows its class. If the theme leaves a gap at the top (a `padding-top` on the page body), reset it in the same rule. To replace the header only on some templates, put a class on those templates' body and scope the rule to it.

### D. Templates you build yourself

Add the module to any page template, landing page template or blog template in the header area, the same way as B. The module works on website pages, landing pages, blog posts and blog listings.

## 3. Choose your menu

In the module's Content tab, open Menu and pick your Navigation Menu. Until you choose one, the editor shows demo content so you can see the layout. Visitors never see the demo; they see your account's default menu.

## 4. Pick a preset

In the Styles tab, open Presets and choose one:

- Clean Light: white header, dark text, a calm default for most sites.
- Dark: deep navy header with light text.
- Brand Accent: header in your theme's primary color. Text turns black or white to suit it; your logo image is not recolored, so pick one that suits your theme color (see docs/FIELDS.md).
- Frosted Glass: a see-through, blurred header that suits pages with a hero image.

Color fields start out showing your theme's colors, but the menu keeps the preset's color until you pick another. If you pick exactly your theme color, the menu shows the preset's color, so pick a shade one step off to use it. A preset sets every style at once. Any style you change afterwards overrides the preset for that one style only, and switching presets keeps your changes.

## 5. Shape the panels (optional)

Every top-level item with children gets a panel automatically: Mega columns when it has column headings with links, otherwise a Dropdown. To change one, open Panels \> Panel settings, add an item and type the top-level label exactly as it appears in your menu (letter case does not matter) or its link, such as /pricing. Then choose:

- Panel layout: Automatic, Mega columns, Tabbed mega, Dropdown or Link only.
- Number of columns: Automatic or one to six.
- Panel width: full width, container width or content width.
- Featured area: a card with image, text and a button, or your latest blog posts (choose the blog under Featured posts source).
- Footer strip: a line and a link along the bottom of the panel.

If a rule does not match any menu item, the editor shows a note naming it, so typos are easy to spot.

## 6. Add descriptions, icons and badges (optional)

Open Item details and add an item per link you want to enrich. Type the link's label or URL. If two links share a label, type Parent \> Label, for example Platform \> Overview. Each item can have a description (up to 90 characters), an icon from the built-in set or your own small image, a badge (New, Beta, Popular or your own word) and a thumbnail.

## 7. Buttons, utility bar, search and languages

- Buttons: up to two, each primary (filled) or secondary (outlined). Leave the text blank to hide one.
- Utility bar: a slim row above the header for up to six links, a phone number and an email address.
- Search: a search button that opens a field and sends visitors to your site search results page.
- Language switcher: appears only on pages that have translations and lists the other languages.

## 8. Behaviour and mobile

- Open panels on: click, or hover with a short delay (click still works, and keyboard and touch work the same way).
- When the page scrolls: static, sticky, sticky and shrink, or hide and reveal.
- Transparent over hero: the header starts see-through over your hero and turns solid after 40 pixels of scrolling. Upload a light version of your logo under Logo for transparent header.
- On landing pages: show the full header, only the logo and buttons, or no header.
- Mobile menu below: the screen width where the mobile menu takes over (1024 pixels by default).
- Mobile menu style: full screen, or a side sheet from the left or right.
- Mobile navigation: drill down (one level at a time with a Back button) or accordion.

## 9. Check and publish

1. Preview the page at desktop and phone sizes.
2. Tab through the header with the keyboard: every item should show a clear focus ring, Enter opens a panel and Escape closes it.
3. Publish.

To keep a panel open while you adjust styles in the editor, type its top-level label in Editor preview \> Open panel in preview.

## Troubleshooting

- The header shows the wrong links: check which menu is chosen under Menu. With none chosen, visitors see your default menu.
- A panel rule does nothing: the editor note lists rules that match no item. Copy the label from the menu.
- Something on the page covers the open panel: raise Styles \> Advanced \> Stacking order.
- Two headers show at once: hide the theme's header with the takeover CSS in step 2C.
- The mobile menu appears too early or too late: change Mobile \> Mobile menu below.

## Help

Email info@allgusto.com. I reply within one business day. Every change to the module is listed in docs/CHANGELOG.md.