This is the full settings reference for the three parts of a site menu: the Nav Links widget (the links), the Menu Icon widget (the button that opens the phone menu) and the slide-out phone menu itself.
For the overview (header layouts, Site Pages vs Custom Links, mega menus, split navigation, sticky headers), see How to set up the header, footer and navigation. Spacing and Animations & Effects are explained once in Widget design panel basics and Animations and effects.
How to add them
- Open the editor and click Add.
- Under Navigation, drag Nav Links or Menu Icon where you want them. Every header layout already has both.
- Select Nav Links and click Manage Links for the links; open Design for the look.
- Select Menu Icon and click Open Menu to edit the phone menu. Click Close Menu when you're done.
Nav Links: Manage Navigation
Click Manage Links. The window is Manage Navigation.
- Navigation content: Site Pages (follows the Pages panel) or Custom Links (your own list).
- Links shown: All, First half or Second half. Use the halves for links either side of a centered logo.
- Site Pages
- The list follows the Pages panel. Manage in Pages panel → opens it.
- The eye button on a page shows Desktop, Tablet and Mobile switches to hide that page from the menu on each screen size. Changes apply live.
- The panel icon next to a top-level page makes it a mega menu (desktop header; phones keep the dropdown). Mega menu edits it; Back to a normal dropdown removes it.
- Custom Links
- Navigation items: "Select a link to edit. Drag to reorder."
- Add Link and Add Folder at the bottom. New ones are called "New Link" and "New Folder".
- Each row's menu has Indent (moves the link under the one above it, as a dropdown), Outdent (moves a dropdown link back to the top level), Duplicate and Delete.
- Reset and start with site pages replaces the list with your pages.
- For the selected link: Name, then Links to:
- Site Page: pick a Page.
- Web address: a URL (starting https://) and Open in new tab.
- Anchor: a Page and an Anchor ID (like #section-id).
- Mega menu: Edit Mega Menu → builds a panel with sections, images, text and buttons. Only in a horizontal desktop header.
- Popup: pick a Popup. It opens on the live site and in preview links. In the editor, open the popup from Pages → Popups. With no popups you'll see "No popups yet — add one in Pages → Popups." See Popups.
- Cookie settings (reopen preferences): reopens the cookie banner so visitors can change their choice. See Cookie banner.
Nav Links: Design
Click the menu on the canvas. The Design panel is titled Navigation. Most settings can differ per screen size: switch screen size in the top bar to change them for tablets or phones.
Mega Menu
Shown only when a custom link is a mega menu.
- Open menu on: Hover (default) or Click.
- Show arrow: an arrow next to the mega menu link.
- This applies to desktop and ultrawide headers. The sections inside the mega menu have their own Design controls.
Layout
- Orientation: Horizontal or Vertical.
- Item order: Left to right or Right to left.
- Space between items: 0–80px.
- Alignment: Left, Center, Right, and for horizontal menus Spread and Even.
- Submenu trigger: Hover or Click.
- Arrows on items with sub-pages: on by default.
Menu Bar
- Links shown before "More": 0–20. 0 shows all. Extra links go under a dropdown.
- "More" label: the dropdown's name (default "More"). Shown when the number above is more than 0.
- Bar background: a color band behind the links. Once set, Bar padding (0–32px, default 8) and Bar corners (0–40px) appear.
- Dividers between links (horizontal menus): None, |, /, : or ·. Divider width (1–4px, line only) and Divider color.
Menu items
Pick a state at the top: Normal, Hover, Selected or Click.
- Normal (All menu items): Font, Font size (8–72), Font weight (100–900), Font color, Format (Bold, Italic, Underline), Case (As-is, UPPERCASE, Title Case, lowercase), Letter spacing (−5 to 20), Item padding (each side, 0–60), Item corners (0–40px) and Effect speed (0–1000ms, default 200).
- Hover: Hover effect (None, Center Underline, Side Underline, Top & Bottom, Background, Border, Text Fill, Roll Over, Float, Forward, Text Color), with Line width (1–12px) and Line color for the line effects; Text color, Background, Format and Lines on hover. Keyboard focus shows the hover look too.
- Selected (the page the visitor is on): Selected effect (None, Center Underline, Side Underline, Top & Bottom, Background, Border, Text Fill), Text color, Background, Format and Lines on the selected page.
- Click (while a link is pressed): Text color, Background and Lines on click.
- Lines (every "Lines…" row): quick buttons Underline, Overline, Top & bottom, All sides, and No lines to clear. Or turn on a Top, Bottom, Left or Right line, each with its width (1–12px), color and style (Solid, Dashed, Dotted, Double). Line appears: At once, Fade, From center or From left. Distance from text: −10 to 24px.
- Colors are drawn exactly as you pick them. The color picker shows the contrast with the background if you want to check it.
Subpages
- Sub-menu box: Background color, Corners (0–32px, default 8), Border (0–8px, default 1) and Border color, a shadow (direction, blur and color), Minimum width (80–480px, default 160), Space between items (0–32px) and Divider between items (0–4px) with Divider color.
- Sub-menu links: Font, Font size, Font weight, Font color, Format, Case, Alignment (Left, Center, Right) and Item padding.
- Sub-menu hover: Text color, Background, Format and Lines on hover.
- Selected sub-page: Text color, Background, Format and Lines on the selected sub-page.
Spacing, Animations & Effects
Padding around the whole menu (per screen size, with a reset) and margin. Hover effects, Entrance and Scroll animations.
Selected the box around the menu instead? Click Menu design at the top of its panel to jump here.
Menu Icon: Design
The button that opens the phone menu. Select it and open Design. It has no Spacing section.
Trigger icon
- Icon shape: pick from menu icons first (hamburger styles and more), or any icon.
- Icon color.
- Icon size: 12–64px, per screen size. Default 22px.
Button
The box around the icon.
- Background (none until you pick a color; Clear background removes it), Border width (0–6px), Border color, Corners (0–40px).
- Width (0 = fit) and Height (0 = fit): 0–120px.
- Alt text (screen readers): defaults to "Open menu".
- Tooltip: "Shown on hover (optional)".
Close icon
The X shown at the top right of the open phone menu.
- Icon shape, Icon color and Icon size (12–64px, per screen size; default 22px).
Animations & Effects
Hover effects, Entrance and Scroll.
Phone menu: Design
Select the Menu Icon and click Open Menu. Then select the open menu panel and open Design. These settings are the same on every screen size.
Content layout
- Direction: Vertical or Horizontal, for the items inside the menu.
- Horizontal and Vertical alignment: Left, Center, Right (and Space Between, Space Around, Space Evenly in a row); Top, Center, Bottom.
Spacing
Padding inside the menu and the gap between its items.
Behavior
- Slide from: Left, Right (default) or Top.
- Menu width (or Menu height when sliding from the top): 20–100% of the screen. Default 80%.
- Animation: how long the slide takes, 100–600ms. Default 250ms.
- Lock scroll: stops the page scrolling behind the open menu. On by default.
- Submenu: Accordion (sub-pages open underneath; default) or Flyout.
Style
- Panel color: the menu's background. Default white.
- Backdrop: the color over the page behind the menu. Default a see-through black.
- Shadow: on or off. When on: Color, X offset (−50 to 50px), Y offset (−50 to 50px), Blur (0–100px) and Spread (−50 to 50px).
Examples
- Eight services, short bar: set Links shown before "More" to 5 and the "More" label to "More services".
- Underline that draws in: Hover → Lines on hover → Underline, 2px, Line appears From center; Selected → the same line so the current page stays underlined.
- Pill-shaped menu bar: Bar background light gray, Bar padding 8, Bar corners 40, and Hover Background white with Item corners 40.
- Full-screen phone menu: Slide from Top, Menu height 100%, Panel color your brand color, and a white Close icon.
Limits and what it can't do
- Mega menus only work in a horizontal desktop header. Phones always use the phone menu with normal dropdowns.
- Indent only goes one level deep in Custom Links, and a mega menu link can't be indented.
- The phone menu has one set of settings for every screen size.
- If a page has more than one Menu Icon, the phone menu uses the close icon settings of the first one.
- Popup links don't open in the editor; use Preview or a preview link.
- Nav Links and Menu Icon can't use Connect to Data. Dynamic pages can still appear in the menu (see the header article).
Who can use it
Anyone with the Mount Olympus tool on the agency team. Client people need Editor, which covers widgets, pages and design.
Troubleshooting
- Some links disappeared into "More": Links shown before "More" is set. Set it to 0 to show all.
- A page is missing from the menu on phones only: in Manage Navigation, open that page's eye button and check Mobile.
- The menu changed on desktop when I edited it on mobile (or the other way round): most settings are per screen size. Check which screen size is selected in the top bar.
- Hover colors look wrong when I tab with the keyboard: keyboard focus uses the hover look on purpose.
- "Edit Mega Menu" is grayed out: the header isn't a horizontal desktop header. Switch to Desktop and use a horizontal menu.
- The phone menu opens but the page behind it still scrolls: turn on Lock scroll.
- The menu icon disappears on a dark header: change its Icon color, or give the Button a Background.