The header and footer are shared by every page. Edit them once and the change shows site-wide. This article covers the layouts, the menu, sticky headers and the logo. Every setting of the Nav Links, Menu Icon and phone menu widgets is in Navigation widgets.
A pinned button can be shared the same way: turn on Show on every page in its Position settings and it's kept with the footer. See "How to add and edit widgets".
Links in footer text can have their own color, so they read on a dark or brand-color footer. Editing that text keeps the color. A link without its own color shows the site theme's link color.
Header and footer layouts
- No header or footer yet? Click Add Header or Add Footer on the canvas and choose a layout. Footer layouts are Copyright (a centered copyright line), Copyright + Social (social icons above the copyright), Multi-column (three columns with a copyright strip below) and Centered Links (menu links centered above the copyright).
- Header layouts:
- Logo + Links: logo left, menu links right.
- Logo + Links + Button: adds a button after the links.
- Centered Links: logo left, links in the middle, button right.
- Logo + Links + Social: social icons after the links. They show the profiles in Business Info until you change them.
- Top Bar: a thin bar above the header with your hours, the towns you serve and your phone (tap to call), all from Business Info. Hidden on phones.
- Centered Logo, Links Below: logo in the middle with your phone (or social icons) on the left and a button on the right, links on a row below.
- Split Links: links on both sides of a centered logo.
- Links + Logo + Button: links left, logo in the middle, button right.
- Logo + Menu Icon: no links in the bar. The menu icon opens the menu on every screen size.
- Menu Icon + Centered Logo: menu icon on the left on every screen size, logo in the middle, button right.
- Every layout uses real widgets you can edit: the Logo, Nav Links (your Site Pages), a Button and the Menu Icon. On tablets and phones the links move into the menu, which also gets the button.
- The button links to your Contact page. With no Contact page it calls the phone number in Business Info (or emails, if there's no phone). Change its words or link like any button.
- Colors come from your theme. If the header has a dark background, the menu icon turns white so it stays visible.
- To change an existing header, select it and click Change Preset (Choose a header layout). This also lists Designed Headers. Your logo, background, menu links (and their settings), button and menu icon look are kept.
- See-through header over a photo: this is a setting, not a layout. See Sticky header and overlap below.
- The header has separate Desktop, Tablet and Mobile layouts. Switch screen size in the top bar to edit each one. Each layout shows exactly what it says: inner columns in a Horizontal row sit side by side on phones too (they don't stack like page columns do).
Menu links
Select the Nav Links widget and click Manage Links. The Manage Navigation window opens. Under Navigation content, choose what it shows:
- Site Pages: the menu follows your Pages panel. Reorder, nest into folders or hide pages there (page menu > Hide in nav, per device). The menu shows each page's name, the same name as in the Pages panel. To change it, rename the page or folder in the Pages panel (or Page settings → General → Page name). The menu updates at once, and on the live site after you publish. The page's SEO title (Page settings → SEO) doesn't change the menu.
- Custom Links: build your own list with Add Link and Add Folder. Drag to reorder. Select a link to set its Name and, under Links to, a Site Page, Web address (with Open in new tab), Anchor (a page and an Anchor ID), Popup or Mega menu.
Pages themselves (add, rename, nest, hide) are managed in the Pages panel.
Mega menus
Mega menus aren't a header layout: any header's Nav Links can have them.
- Site Pages: in Manage Links, click the panel icon next to a top-level page (for example Services) to make it a mega menu. Click its Mega menu button to edit it, or the bin to go back to a normal drop-down. On phones and in the mobile menu the page keeps its normal drop-down list.
- Custom Links: set a link to Mega menu and click Edit Mega Menu.
- Build the panel with sections, images, text and buttons, then click Done. Mega menus work in a horizontal desktop header. Phones use the mobile menu instead.
- Ask Zeus: in the editor's Zeus chat, say "Design a mega menu for my services". Zeus builds it from your service pages, and you can edit it here like any other mega menu.
Menu design
Click the menu on the canvas (any link, or the space around it) to select it. The Design panel is titled Navigation. Most settings can differ per screen size. Navigation widgets lists every option; in short:
- Selected the box around the menu instead (its panel shows Layout, Style, Spacing and Size)? Click Menu design at the top of that panel. The boxes that hold the menu in a header are called Menu area.
- Layout: orientation, item order, space between items, alignment, sub-menus on hover or click, and the arrows on items with sub-pages.
- Menu Bar: how many links show before More, a background bar, and dividers between links.
- Menu items: font, size, color and padding, with tabs for Normal, Hover, Selected (the page the visitor is on) and Click. Hover, Selected and Click each get their own colors and Top, Bottom, Left or Right lines, with Line appears (at once, fade, from the center or from the left) and Distance from text.
- Subpages: the drop-down box and its links, with Sub-menu hover and Selected sub-page looks.
- Readable text: a Hard to read note shows under a text color that's hard to read on its background.
- Ask Zeus: in the editor's Zeus chat, say "add a line under the menu items on hover" or "highlight the current page with a line on top and bottom".
Split navigation
To put links on both sides of a centered logo, use two Nav Links widgets. In Manage Links, set Links shown to First half on the left one and Second half on the right one. The halves rebalance when you add or hide pages.
Mobile menu
The Menu Icon widget opens the slide-out mobile menu. Select it and click Open Menu to edit the menu's contents and design, then Close Menu. The menu's options are in Navigation widgets.
Sticky header and overlap
Select the header and open Design:
- Stay at the top while scrolling: set per device. Tablet follows Desktop and Mobile follows Tablet unless you change them.
- Overlap first section: the header sits on top of the first section (for example a hero photo), set for the page you're on and per device. You can set the header's background while it overlaps, or make it transparent.
- Change header on scroll: a different background color and opacity, less spacing, a smaller logo, or only the navigation row. This only works when the header stays at the top.
- Logo on scroll: under Logo size on scroll, click Choose image to pick a different logo from your media library (or upload one). Once visitors scroll, the header logo fades to this image; it keeps the logo's size, link and the logo size setting. Click Remove to keep the same logo. If the image wouldn't stand out on the scrolled header's color, it gets a light or dark backing so it stays readable.
Sticky and scroll effects show in Preview and on the live site, not while editing.
Logo background plate
The header logo stays readable by itself: if it wouldn't stand out on what's behind it (the header color, a gradient, a photo, or the first section when the header overlaps it), it gets a light or dark rounded plate. To choose yourself, select the logo, open Design and find Background plate:
- Automatic: a plate only when the logo needs it.
- Off: never a plate. Sites built with Create with Zeus start with Off: Zeus never adds a plate, he picks a header color the logo reads on instead.
- Light or Dark: always a plate, with your own color, padding and corner radius.
It covers the logo in every state, including the Logo on scroll image. You can also ask Zeus, for example "remove the white box behind the logo". More logo options are in Image and logo widgets.
Language Selector
On a site with other languages, add a Language Selector (Add → Navigation) so visitors can switch language, or click Add a Language Selector to the header in Settings → Languages to put one in every header layout. It shows the languages the current page exists in, as a dropdown or a row of links. See Multi-language sites.
Dynamic pages in the menu
For a dynamic page, open its menu in Pages and choose Show items in navigation. Pick the parent (Show under) and the Menu text field. You can also drag the dynamic page into a folder in the Pages panel; it shows under the folder its items are listed in. See Collections and dynamic pages.
Examples
- Roofer with a phone-first header: choose Top Bar so hours, service towns and a tap-to-call phone sit above the menu, and Stay at the top while scrolling on Mobile.
- Hero photo behind the header: turn on Overlap first section on the homepage with a transparent background, then Change header on scroll to a solid color so the menu stays readable after scrolling.
- Services mega menu: in Manage Links, make the Services page a mega menu and add a column per service with an image and a short line.
- Short menu, long SEO titles: rename pages to "Roofing", "Gutters", "Contact" in the Pages panel. Their SEO titles stay as they are.
Limits and what it can't do
- Every page shares one header and one footer. There's no per-page header, but Overlap first section is set per page.
- Mega menus only work in a horizontal desktop header. Phones and the mobile menu use the normal drop-down list.
- With Site Pages, drop-downs are one level deep, because the Pages panel nests one level.
- Hide in nav has Desktop, Tablet and Mobile choices.
- Sticky headers, scroll changes and Logo on scroll only show in Preview and on the live site, not while editing.
- The Top Bar layout is hidden on phones.
Who can use it
- Agency team members with the Mount Olympus tool.
- Client people need Editor to change the header, footer, menu or mobile menu. See Client permissions.
- Asking Zeus to design a mega menu or menu styling is for the agency team.
Troubleshooting
- A page is missing from the menu: in the Pages panel, open its ⋯ → Hide in nav and untick the screen size. Check it isn't a draft, and publish the site.
- The menu shows a different name from the page title in Google: the menu shows the page name. Rename it in the Pages panel. The SEO title is separate.
- I changed the menu but the live site didn't change: publish the site. Header and menu changes go live with a site publish (not with Publish this page).
- The Manage Navigation list is empty ("No links yet. Add one below."): you're on Custom Links with no links. Click Add Link, or switch back to Site Pages.
- The Mega menu button is grayed out ("Edit mega menus in a horizontal desktop header"): switch the top bar to Desktop and use a header layout with links in a row.
- My sticky header doesn't stick in the editor: that's expected. Check it in Preview.
- The menu icon can't be seen: on a dark header it turns white by itself. On a light photo or gradient, change its color in its Design panel, or give the header a background.
- The logo has a box behind it: that's the automatic Background plate. Set it to Off in the logo's Design panel.