# How to Add / Configure your Website Navigation

> Add and configure a navigation menu on your ProSite site - horizontal or vertical, responsive, with sub-menus and custom styling.

Source: https://www.kualo.com/knowledgebase/prosite-pages/how-to-add-configure-your-website-navigation
Updated: 2026-06-11

---

Website navigation menus are an essential part of any site design, letting visitors quickly find the content they need. ProSite menus are highly configurable - horizontal or vertical, responsive across all devices, and capable of sub-menus, custom colours, alignment and much more.

If you built your site from a pre-designed template, a menu will already be in place for you to adjust. If you are building from scratch, you may need to add a menu element manually. Your site can also feature multiple menus - useful for footer links or in-page navigation.

## Adding a menu element

1. Launch the Site Builder tool from your cPanel.
2. Go to the page where you want to insert the menu.
3. Drag the **Menu** element to the position on your page where you want it to appear. This is typically the header area, but you can place a menu anywhere on the page.

:::info
If you want the menu to appear on every page, the menu element (or its container) must be set to [display on all pages](/knowledgebase/prosite-web-site-builder/how-to-place-content-so-it-appears-on-every-page). This is the default behaviour for header and footer areas.
:::

![Dragging a menu element onto the page](https://kb-cdn.kualo.com/50/17/5017b4e1240a1dc765be1440109d8a7bb53c0b2c.mp4)

4. Choose the pages you want to appear in the menu, or leave this and adjust it later.
5. Select the menu element you have added. The right-hand panel shows two configuration sections: **Menu** and **Menu Items**.

![Menu configuration panel](https://kb-cdn.kualo.com/5b/9b/5b9b61c1f9550e09eab8395879367ca39c58e922.png)

## Configuring the menu element

### Menu options

The **Menu** panel controls the menu element as a whole - think of it as the container that holds all the individual navigation items. You can adjust:

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

![Menu options panel](https://kb-cdn.kualo.com/20/26/2026b07c022bfd610763b480ed4842ed5fcedb50.gif)

### Menu Items options

The **Menu Items** panel is where most of the visual styling happens. You can adjust:

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

![The menu settings panel in ProSite](https://kb-cdn.kualo.com/b2/c7/b2c76fec83ce517b838629a15c67d475913d384d.png)

## Practical tips

### Changing background colours

In most cases, the menu element sits inside a parent container - typically your site's header section or a layout element. Some styling choices, such as setting a background colour, will often need to be applied to that parent container rather than to the menu element itself.

For example, suppose you have a white navigation area and want to change it to a different colour.

![White navigation area before colour change](https://kb-cdn.kualo.com/49/a2/49a20b9f7760515999cf7e2c49ceccdd9eccd995.jpg)

If you apply the background colour to the menu element itself, you get a result like this:

![Background colour applied to menu element only](https://kb-cdn.kualo.com/bb/6d/bb6d68b869396c7dea2aa41d1114aaedceb31223.jpg)

What you most likely want is to change the background colour of the header section that contains the menu, not the menu element itself.

![Background colour applied to the header container](https://kb-cdn.kualo.com/ca/3a/ca3a963d7ebb27af13d115b49f52ced619a6471c.jpg)


---

_Source: Kualo Knowledgebase — https://www.kualo.com/knowledgebase/prosite-pages/how-to-add-configure-your-website-navigation · © Kualo Ltd._