The Navigation module is your website's menu and enables visitors to move between pages. Add a Navigation module by selecting Navigation from the category Page navigation in the Add module overlay.
This is a header and footer-only module
The Navigation module can only be inserted in the header or footer of your website and you will therefore not be able to select it from the Add module menu anywhere else on your website.
Design
Apart from aligning your navigation left, right or center you can also adjust the following:
- Float: use this feature for wrapping text around your website's menu. You can float the menu to the left or the right.
- Slide direction: in case you've enabled hamburger menu, it's possible to decide whether the page tree overview should slide from the right or left once someone clicks on the hamburger menu icon.
- Spacing: adjust the amount of spacing between the module and it's frame (padding) and outside of the module (margin).
Click More local design options for additional styling options. For more information on styling, read our dedicated guide here. Outlined below are the design settings unique to the Navigation module.
Hamburger menu icon: adjust color in normal and hover state, as well as the icon size.
Top level and sub level menu: the top level menu refers to pages that are immediately visible on the navigation while sub level menu includes subpages visible in a menu dropdown.
For both these types of menus you have a wide range of styling options available, including text styles, background color, border, and spacing.
What are text transitions?
When styling your navigation text (both on top level and sub level) you will come across a setting called Transition type. This enables you to add a small effect on text when visitors hover over the text and it switches from normal to hover state. Read more about transition types here.
Icon: set font color, icon size and margin for your page icon. You make the icon appear in your navigation by selecting one for the relevant page in the page settings menu.
Side menu: the side menu slides in if you have enabled the hamburger menu and a visitor clicks the hamburger menu icon. For the side menu, you can adjust font color, background color and padding.
Hiding specific pages from the navigation
If you don't want one or more of your pages to show up on the navigation, you can hide them in the Page Settings menu. You can even decide which viewports you want to hide them on. Read this article for more information about hiding pages.
Settings
Enable hamburger menu icon: tick the box in order to collapse your navigation into a hamburger menu.
Push content when menu slides in: with this option disabled, when the menu slides, it covers the right or left side of the page. When this option is enabled, when the menu slides, it pushes the existing page to the right or left.
Show parent link as active: if enabled, when a visitor is on a subpage, the top-level page will also be shown as active. For example, imagine the following page structure: Contact > Booking info. When the visitor is on the Booking info page, the Contact page will be shown as active on the navigation menu.
Multiple navigations
You can have more than one Navigation module in your header and footer at the same time. It may be helpful for visitors to encounter a website navigation in the footer of a website so they can easily move to another page after having scrolled down the current page.