How do I add a navigation menu to every page of my website?

Drag the Navigation Bar widget onto a Master Page, then attach that Master Page to your pages. The menu builds itself from the list of pages on the left, so when you add a page, it appears in the menu on every page.

Which version are you on? EverWeb 4.6 has a new Navigation Bar with new settings, described below. A menu added before 4.6 keeps its old settings (the EverWeb 4.5 sections below), even when you open the project in 4.6. To switch an old menu to the new settings, delete it and drag a new Navigation Bar onto the Master Page, then style it again.

Add the menu to every page

  1. Make a Master Page (a design that many pages share) if you don't have one: click New Master Page. See Put the same header, menu and footer on every page with a Master Page.
  2. Select the Master Page and add the menu:
    • Navigation Bar: open the Widgets tab at the top right and drag the Navigation Bar widget onto the page. On a fixed-width (Centered Layout) page, put it in the Header. On a Responsive page, put it near the top.
    • Navigation Container (EverWeb 4.6 and later): click Containers in the toolbar and choose Navigation Container. It holds a Navigation Bar plus a space for your logo, and suits Responsive pages.
  3. Select one of your pages, go to Inspector > Page Settings, and choose your Master Page in the Master Page dropdown. Do this for each page.
  4. Publish your website.

From now on, change the menu on the Master Page only. On your other pages, the menu shows a small black page icon in its corner, and clicking it offers to take you to the Master Page.

Choose which pages are in the menu

  • Order: the menu follows the order of the list of pages, top to bottom. Drag pages up or down to change it.
  • Leave a page out: select the page, go to Inspector > Page Settings, and untick Include page in navigation menu. The page stays on your website, and you can still link to it.
  • Change the wording: type it in Navigation Menu Display Name in the same tab. Use this for spaces, accents and symbols, which a page's File Name can't have.

EverWeb 4.6 and later: add your own menu items. Select the Navigation Bar, go to Inspector > Widget Settings and open Extra Menu Links. Click Add, double-click the name to change the wording, then set its link: a section of a page, a page, or another website. Tick Hide my site's pages if you want the menu to show only the links in this list. A new page then won't appear in the menu until you add it there.

The menu is on every page, so when you change it, EverWeb has to publish every page again. Your next publish takes longer than usual.

Drop-down menus

Put pages inside a directory (a page that holds other pages, like a folder). Click Add Directory in the toolbar, then drag pages a little under and to the right of it. The directory becomes a menu item, and its pages appear in a drop-down below it. See Can EverWeb create drop down menus?.

In EverWeb 4.6 and later, the menu shows up to two drop-down levels: put a directory inside a directory for the second one, so the menu has three levels in all. EverWeb 4.5 shows one drop-down level. Under Dropdown Menus in Widget Settings, Directory indicator sets the small symbol beside items that open a drop-down (Chevron, Triangle, Plus or None), and Dropdown item style sets the Button Style for the drop-down items.

Change how it looks

EverWeb 4.6 and later: Menu item style

The menu items take their look (fill, text colours, padding and hover look) from a Button Style. Your project has one made for this, called Navigation Button.

  1. Select the Navigation Bar and go to Inspector > Widget Settings.
  2. Open Menu Items and choose a Button Style in Menu item style. A small preview shows beside it, and the menu updates on the page.
  3. To change how that style looks, choose Edit Button Styles... at the bottom of the same menu (or use Format > Website Styles... and click Button Styles). Set the Normal, Hover, Pressed and Keyboard Focus looks, then click Save. Every menu and button that uses the style changes.

For the full Button Styles steps, see Design buttons that look clickable: colours, rounded corners, shadows and hover effects.

Good to know:

  • None in Menu item style makes the items plain text links. Their colours then come from Inspector > Hyperlinks.
  • The bar's background is separate from the items. The Fill, Border and padding in Inspector > Shape Options and Metrics style the strip behind the items, not the items themselves.
  • Minimum item height sets how tall each item is (0 makes it as tall as its text and padding). About 44 pixels or more is comfortable to tap on a phone.
  • Layout has Equal button widths, Item spacing and Alignment (Left, Center, Right or Justified).
  • Fonts in the toolbar change the item text, and Mouse Transitions & Animations effects in Shape Options apply to each item.
  • Without a Navigation Container, Brand in Widget Settings can show your logo in the bar. Give it Logo Alt Text, such as your business name.

EverWeb 4.5 (and menus added before 4.6)

With the Navigation Bar selected: text colours and underlining are in Inspector > Hyperlinks under Hyperlink Formatting; the box behind each item is in Shape Options; alignment, spacing and drop-down colours are in Widget Settings; the font is under Fonts in the toolbar.

The menu on phones

EverWeb 4.6 and later

  1. Select the Navigation Bar on your Master Page and go to Inspector > Widget Settings.
  2. Under Layout, choose what happens in When space is limited:
    • Wrap: the items move onto more rows.
    • Hamburger when needed: the menu becomes a menu button when the items no longer fit.
    • Hamburger at breakpoint: the menu becomes a menu button below the width you type in Breakpoint width (px) (800 unless you change it).
  3. Style the button under Mobile Hamburger Menu: its Button style, the Menu button label (such as Menu), the Menu icon (Three Lines, Two Lines, Dots or No Icon), and When menu is open.
  4. Under Hamburger Menu Appearance, choose whether the open menu covers the page or pushes it down (Presentation), and set the Menu panel background. Mobile Animation and Behavior sets the Open effect and whether the menu closes after a visitor picks a page.
  5. Preview and make the EverWeb window narrower to test.

EverWeb 4.5 (and menus added before 4.6)

  1. Select the Navigation Bar on your Master Page.
  2. Go to Inspector > Widget Settings and scroll to Responsive Options.
  3. Tick Responsive Navigation Bar.
  4. Set Appear at Width. On screens narrower than this (700 pixels unless you change it), the menu becomes a button with three lines (a "hamburger") that opens the menu. Style it under Hamburger Button.
  5. Preview and make the EverWeb window narrower to test.

If your menu wraps onto two lines before it switches, increase the width. If the button shows on computers too, the number is set too high. This works on Centered Layout and Responsive pages. If you use separate Mobile Pages, see My website looks wrong on a phone: how mobile works in EverWeb.

Common questions

  • A link to another website in the menu: in EverWeb 4.6 and later, add it under Extra Menu Links (see above). In 4.5, see How to put a link to another website in EverWeb's navigation menu.
  • Menu items that jump to sections of one long page: in EverWeb 4.6 and later, use Extra Menu Links and link each item to a section of the page. In 4.5, the Navigation Bar can't do this: build that menu from buttons or text and link each one. See How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page.
  • The menu items don't change when you set their colours in Hyperlinks (4.6): the items use a Button Style. Change the style, or choose None in Menu item style to use the Hyperlinks colours.
  • The whole bar turned one colour (4.6): the bar's own Fill is set in Shape Options. Turn the bar's fill off if you only want the items coloured.
  • A menu item that doesn't work: check it's part of the Navigation Bar, not a separate text box placed on top of it.

Related articles

  • 2 Users Found This Useful
Was this answer helpful?

Related Articles

Can EverWeb create drop down menus?

Yes. The Navigation Bar widget makes drop-down menus from your directories. A directory is a page...

When I changed my link colors, they don't appear changed when previewing

There are a few reasons why you may see the wrong colors for links after publishing your site;1....

How can I mask or crop an image in EverWeb?

To easily mask or crop an image in EverWeb, simply select the image and then go to Format which...

My characters with accents are being converted, how do I included accented letters in the Navigation bar?

You are most likely entering text in the File name field in the Inspector. File names can only...

How do I move or drag objects into the header, a blue line appears that stops me

The blue lines mark the header, content and footer sections of a Centered Layout page. An object...