Creating a Sticky Navigation Menu

A sticky navigation menu, also known as a fixed navigation menu, is a type of menu that remains visible at the top of a webpage even as the user scrolls down the page.

This type of menu can be particularly useful for websites with a lot of content, as it provides a quick and easy way for users to navigate the site without having to scroll all the way back up to the top of the page.

By keeping the menu in a fixed position, it also ensures that the menu is always accessible and doesn't get lost or buried in the content. In this article, we will show you how you can create a sticky navigation menu on ProSite your website.

1. Log into your Site Builder in cPanel

2. The element that you will want to select will typically be the Header which contains your menu. Select the Header element in the Page structure tree on the right side.

3. In the Layout options on the right side, check the Sticky box. You can adjust the alignment, typically to stick the menu to the top you'd need to select the top middle alignment.

4. The header area should now stick to the top of the page when you scroll. Depending on the colour of your header, you may wish to add a Shadow. This will ensure that when you scroll down over the same colour, the menu is clearly distinguishable from the body.

That's it! You've now created a sticky navigation menu.

It's possible to create different kinds of sticky menus by playing with the alignment. You may need to make other adjustments for this to work. For instance, to create a left aligned menu you can:

Set the alignment to left top.
Set the menu element and other child elements to be a vertical layout type.
Set the width of the header to be a percentage of the screen, for instance, 20%.

This can create a left aligned sticky menu, which looks as follows:

Creating a Sticky Navigation Menu

Creating a Sticky Navigation Menu

Related Articles

4 Getting Started with ProSite

1 Building from Scratch Video Series

1 Tips & Tricks

Categories