EverWeb's Navigation Bar runs across the page. It has no vertical setting, in EverWeb 4.5 or 4.6. For a menu down the side of your pages, use a vertical menu widget, or build your own from buttons or text links on your Master Page.
Why not make the Navigation Bar narrow? The bar fits as many items on each row as it can. Short page names end up side by side and long ones get a row each, so the menu doesn't make a neat column.
Option 1: a vertical menu widget
Other developers make vertical and side menus for EverWeb. You'll find them on the EverWeb add-ons page, for example:
- Responsive Vertical Navigation Menu: a sidebar menu with up to two levels of sub-menus. You choose its width, and whether it always shows on computers and tablets while staying behind a menu button on phones.
- Slide Out Navigation: a menu that slides in from the left or right edge when visitors click its button. It works well on phones.
To install one, see Install and use third-party widgets in EverWeb. Put it on your Master Page so it's on every page. With these widgets you add each page to the menu yourself, so add new pages to it when you make them. The widget's maker supports it.
Option 2: a column of buttons (EverWeb 4.6 and later)
Buttons are separate objects, so you can make every one the same width and they always line up.
- Open your Master Page, so the menu appears on every page. See Put the same header, menu and footer on every page with a Master Page.
- Choose Insert > Buttons > Button Styles and pick a style, such as Navigation Button. Type the page name on it.
- Select the button, go to Inspector > Hyperlinks, tick Enable as Hyperlink, set Link To to One of My Pages and choose the page.
- Set the button's width and height in Inspector > Metrics. Make it wide enough for your longest page name.
- Copy and paste the button for each page, then change its words and its link.
- Select all the buttons (Shift-click each one) and choose Arrange > Align Objects > Left, then Arrange > Distribute Objects > Vertically, so the gaps are even. See Line up, centre and space objects evenly on your page.
To change how every button looks at once, edit its Button Style in Format > Website Styles.... See Design buttons that look clickable: colours, rounded corners, shadows and hover effects.
In EverWeb 4.5, make each button from a shape with your words on it, as described in the same article, then link it and line them up the same way.
Option 3: a Text Box of links (any version)
On your Master Page, click TextBox in the toolbar and type one page name per line, with bold headings for groups if you like. Highlight each line, go to Inspector > Hyperlinks, tick Enable as Hyperlink, set Link To to One of My Pages and choose the page. It's the quickest way to make a long list, such as pages in A to Z order. See How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page.
Good to know
- New pages: buttons and text links don't update themselves. When you add a page, add a link to it on the Master Page.
- The current page: a hand-made menu doesn't highlight the page the visitor is on. The Navigation Bar and some menu widgets do.
- Keep it on screen: to keep a short menu in view while visitors scroll, see Keep a header, menu or button on screen while visitors scroll (Fixed Position).
- Centered Layout pages: put the menu at the left of the content area on the Master Page, and keep each page's own content to the right of it.
- Responsive pages: objects from the Master Page come before the page's own content, so a sidebar on the Master Page ends up above your content, not beside it. For a sidebar on a Responsive page, use a menu widget that's made for it, or add a Container Row to each page: a narrow Container with the menu on the left, a wide one with your content on the right.
On phones
A sidebar is too wide to sit beside your text on a phone. Select the sidebar (or its Container), go to Inspector > Metrics and, under Responsive, untick Show on mobile. Then add a Navigation Bar across the top of your Master Page that shows only on phones: in EverWeb 4.6, set its When space is limited to Hamburger at breakpoint, so it's a menu button. See Hide or show objects on phones, tablets or computers (Show on Device). On a Centered Layout page, you can give phones a Mobile Page with a menu at the top instead: see My website looks wrong on a phone: how mobile works in EverWeb. Menu widgets that change for phones by themselves don't need this.