Navigation and Sub-Navigation Menus

Overview

The Navigation and Sub-Navigation Menus are links to internal pages of your Website. We build these menus automatically based on the pages you have created and the menu layout may vary a bit from template to template. A well-structured Navigation Menu helps your Site visitors find the information they are looking for.

Guide

Edit your navigation's design by right-clicking on the navigation and selecting Edit Design.nav1_en-US.png

Layout

The Layout section lets you switch easily between one of the several designs for the navigation bar. Keep in mind you can modify the design of any of these layouts, so just pick one which looks similar to the design you want and then see the later sections of this article for customising the look even further.

nav2_en-US.png

To use the navigation capabilities (either published or unpublished), users will need to actively change a layout. The new navigation uses different CSS selectors so switching the layout will reset the navigation customisation and allow the user to customise it again. Clicking undo will bring back the old navigation.

If your site contains subpages, then you will also have access to a Sub Navigation Layout section. From here you can select a layout for how the subpages on your site will appear. Just like the main navigation layout, you can also modify the sub navigation layout in later sections.

nav3_en-US.png

If you want to place your site's logo in between your navigation items without having to create two separate sets of navigations, You can do it by checking the "Add centre logo" box.

nav4_en-US.png

It will break the navigation links to two, aligning them equally from both sides of the logo. The centre logo feature takes into account the number of navigation items, So if you  keep adding pages, the navigation items will be organised automatically.

In case there is an odd number of navigation items, the right side will contain more items (no option to change it).

Pages

From the Pages tab, you can customise:

  • The style of individual navigation bars (background colour, hover colour and spacing as well as text style)
  • The direction of the navigation (Left-To-Right or Right-To-Left)
  • The number of visible navigation items
  • The type of divider you want between your navigation pages if you want a divider.
  • Whether quick navigation is enabled (Read more about this in Considerations

nav5_en-US.png

If you click on "Link Text" then you can adjust options for

  • Font Type
  • Font Size
  • Text Colour
  • Option for underline, bold and italic

nav6_en-US.png

Selected Page & Hover

At the bottom of the pages section, you can customize the style of the selected navigation and the hover effects for the navigation. Select from the many "hover" effects to add additional uniqueness to your site.

nav7_en-US.png

You can also modify the colour of the navigation item when you hover over it, as well as the bold, underline and italics from the "link text" options.

nav8_en-US.png

Subpages

From the Subpages tab, you can customise the sub navigation style

  • Background colour
  • Shadow
  • The spacing between sub navigation
  • Divider style
  • Selected page background colour

nav9_en-US.png

If you go into the "link text" options for subpages you can also specify many options for how the sub pages appear. Specifically:

  • Font Style
  • Font Size
  • Text colour
  • Bold, Underline and Italics
  • Text Direction for right to left or left to right
  • Selected page text colour
  • Selected page Bold, Underline and Italics

nav10_en-US.png

Spacing

From the Spacing tab, you can customise the spacing of the navigation bar.nav11_en-US.png

Things to consider

What happens when I switch to a new navigation layout?

The new navigation uses different CSS selectors so switching the layout will reset the navigation customisation and allow the user to customise it again. Clicking undo will bring back the old navigation.

What is quick navigation?

Quick navigation allows you to navigate through pages without refreshing the entire page.

Will the navigation preview in the Design Editor display in localised languages?

Yes. The navigation layouts support all localised languages in the editor and will display in the previews.

Resources

  • To learn how to add this widget to your page, check out our guide on Adding Widgets.
  • To learn more about editing widgets, take a look at our guide on Editing Widgets.
  • To learn more about editing widget design and style, check out our guide on Widget Design.
  • To learn more about editing spacing, take a look at our guide on Spacing.