fbpx

Creating a Sticky Navigation Menu to a Specific Page

Share on facebook
Share on twitter
Share on pinterest
Share on google
Sticky navigation menus are useful if you have a long list of features or sub-sections in a particular page and you want it to be seen only in that specific page. Not only does it help you improve the user experience, but it also creates a schema in Google's algorithm as you are now using a navigation menu to structure your website.

Sticky navigation menus are useful if you have a long list of features or sub-sections in a particular page and you want it to be seen only in that specific page. Not only does it help you improve the user experience, but it also creates a schema in Google’s algorithm as you are now using a navigation menu to structure your website.

This article follows 3 simple steps to get you started with creating a sticky navigation menu for your sub-sections of a lengthy page.

Step 1 – Create a New Menu Specifically For This Purpose

On your WordPress dashboard, go to Appearance > Menu and click on “create a new menu”

Give it a name that can help you easily identify. For example, if you need a menu to showcase all the features in one particular page, you could name it “Features“.

The next step would be to create a “Custom Link” for each subsection. Do note that, as you will see in Step 2, you would need to assign a Menu Anchor to each subsection which is identified through a unique anchor link. The standard notation for the URL is to add a “#” in front of the label (see blow).

Step 2 – Create the Structure of the Page

For the purposes of this demo, we would create a 2 column section. The width of the left column could be set to 30% and the other 70%.

Next, you would insert a “Nav Menu” widget on the left column and link the menu that you created in Step 1, i.e. “Features”. The right column would comprise of any content you would like to showcase under each section in addition to the “Menu Anchor” Widget right at the top.

Ensure you set the label of the “Menu Anchor” widget to the custom URL that you set in Step 1, but this time without the “#”

NOTE: This field is case-sensitive and therefore you will need to ensure they are capitalized accordingly.

Step 3 – Design the Navigation Menu to Make it Stick

Once you have carefully linked the Menu Anchor with the URLs set in the Step 1, the next step would be to style the menu and make sure the menu follows you as you keep scrolling through the different subsections.

To configure it, simply click on the Nav Menu widget, go to Advanced > Motion Effects and set Sticky to “Top”.

Note: Depending on the structure of the page, you may consider entering a positive value to “Offset” which would push the Nav Menu section down.

To make sure the widget doesn’t to overflow onto the sections below (if you have any), switch “Stay in Column” to On.

Bonus Step (Optional)

For an extra effect to appear once you scroll down, you could add the following CSS to the “Custom CSS” section of the Nav Menu widget. Simply replace #ECECEC to the Hex color code you prefer

selector.elementor-sticky--effects {
background-color:#ECECEC!important;
}

selector {
transition: background-color 2s ease !important;
}

selector > .elementor-container {
transition: min-height 1s ease !important;
}

Found this guide useful? Submit the links with the Sticky Navigation menu in the comments section below!

WANT TO LEARN MORE?

Get content on tips, tricks and reviews on Elementor right to your mailbox!

Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on google
Google+

Leave a Comment

Your email address will not be published. Required fields are marked *

Latest Posts

How to create a custom header with Astra Pro

How to create a custom header with Astra Pro

Astra is one of the most popular themes that is compatible with most page-builders specifically, Elementor. It has a free version to get started with but this article explores one of the popular features offered by the Pro version – custom headers. It’s a great feature to have especially if you are using the free version of Elementor. Learn how to build a custom header with Astra Pro

Read More
Scroll to Top

We use cookies to give you the best experience. If you continue using our website, we’ll assume that you are happy to receive all cookies on this website.