# Creating a sticky navigation menu

> A sticky navigation menu stays fixed at the top of the page as visitors scroll, making it easy to navigate content-heavy sites.

Source: https://www.kualo.com/knowledgebase/other-apps/creating-a-sticky-navigation-menu
Updated: 2026-06-09

---

A sticky navigation menu - also known as a fixed navigation menu - stays visible at the top of a webpage as the user scrolls down. This is particularly useful for content-heavy sites, as it means visitors never have to scroll back to the top to reach the navigation.

![Sticky navigation menu demo](https://kb-cdn.kualo.com/36/99/3699024017cb600bad49f1283b221fd7cec921eb.mp4)

## Making your header sticky

1. Log in to cPanel and open the ProSite Site Builder.

2. Select the **Header** element in the page structure tree on the right-hand side. The header is the element that typically contains your navigation menu.

   ![Selecting the Header element in the page structure tree](https://kb-cdn.kualo.com/ee/11/ee116eb45bf3ff8ec2020fcc43896e2d889073dd.png)

3. In the **Layout** options panel on the right, tick the **Sticky** checkbox. To fix the menu to the top of the viewport, set the alignment to top-centre.

   ![The Sticky checkbox in Layout options](https://kb-cdn.kualo.com/ea/b7/eab7850eb6cdc626899538e512bc75fd25c77eaa.jpg)

4. The header will now stick to the top of the page as you scroll. If your header and page body share a similar colour, consider adding a **Shadow** to the header so the menu remains clearly distinguishable from the content beneath it.

   ![Header with shadow applied](https://kb-cdn.kualo.com/e4/f4/e4f4b3683d59e7627617fb916d7a9fe9c83c685d.png)

Your sticky navigation menu is now set up.

## Creating a left-aligned sticky menu

You can create other sticky menu styles by adjusting the alignment settings. For a left-aligned sidebar-style menu, try the following:

- Set the alignment to **top-left**.
- Set the menu element and its child elements to use a **vertical** layout.
- Set the header width to a percentage of the screen - for example, 20%.

This produces a left-aligned sticky menu that sits alongside your page content as visitors scroll.

![Left-aligned sticky menu example](https://kb-cdn.kualo.com/a4/67/a4677bd530e16e7882ddf442b2b282aab9daf725.mp4)

:::tip
You may need to adjust other layout settings - such as padding, z-index, or content area width - to ensure the rest of your page content flows correctly alongside a left-aligned sticky menu.
:::


---

_Source: Kualo Knowledgebase — https://www.kualo.com/knowledgebase/other-apps/creating-a-sticky-navigation-menu · © Kualo Ltd._