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!
