How to Add / Configure your Website Navigation

Knowledgebase Article

How to Add / Configure your Website Navigation

Website navigation menus are an essential aspect of any website design, allowing visitors to quickly and easily find the content they are looking for.

A menu typically consists of a list of links that lead to different pages on the site.

However, as websites become more complex and the number of pages increases, it's important to organize the menu in a way that's easy to use.

Menus in ProSite are highly configurable, can be horizontal or vertical, aligned and spaced in different ways, feature different colours, use sub-menus and work responsively across all devices and much more.

If you built your site from one of the pre-designed templates, your design will already have a menu in place which you can adjust. If you're building from scratch, you may need to add a menu element.

Your site can also feature multiple menu elements; this can be useful if you'd like to have different links in your footer or if you'd like to create navigation within a page.

Let's dive in to understand how you can add and configure your menu item.

1. Launch the Site Builder tool from your cPanel.

2. Go to the page where you want to insert your new menu.

3. Drag the Menu element to the place on your page you'd like your menu to appear. This will typically be in your header area, but you may add a menu anywhere on the page. If you are expecting this menu to appear on every page, keep in mind that the menu element or its container will need to be set up to display on all pages (this is the default state for your header / footer areas).

4. Choose the pages you'd like to appear in this menu, or adjust this later.

5. Select the Menu you've added. In the right side panel, you can adjust various settings under the Menu and Menu Items config panels.

5.1 Menu options allows you to change the settings of the meny element as a whole. Think of this as the container of the individual meny navigation items. You can adjust:

Type (Horizontal / Vertical)
Alignment
Properties for the default menu, sub-menu and mobile menu

5.2 The Menu Items options is where you can control the appearance of the menu items (links). This is where most of the styling of your menu will take place. You can adjust:

Font type and styling options
Menu item spacing
Animation
Spacing
Style, colour, background and border settings for all states (default, hover and active).

Practical Tips

Changing Background Colours

In many cases the menu item itself will sit within a parent container. This may be your websites 'header' section, or it may be a containing Layout. Some of your menu styling, such as setting a background colour, might therefore actually best apply to a containing element, rather than to the menu element itself.

In the following example we have a white navigation area, and we'd like to change this to a different colour.