Is there a way to highlight the "current" menu item as the user scrolls on Webflow while using a sticky menu on the side of the website?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Yes, there is a way to highlight the "current" menu item as the user scrolls on Webflow while using a sticky menu on the side of the website. Here's how you can achieve this:

Create your sticky menu: Design and style your menu element as a sticky element on the side of your website using the Webflow Designer.
Select the menu items: Select each menu item within your sticky menu element using the Webflow Designer.
Add a custom attribute: In the Settings panel for each menu item, add a custom attribute called "data-scroll-target" and set a unique value for each menu item. This value will be used to link your menu item to the corresponding section on the page.
Add interactions: Open the Interactions panel and create a new interaction for your sticky menu.
Add a scroll trigger: Within the interaction, add a Scroll Trigger and set it to the appropriate scroll offset you want the menu to start highlighting.
Create an action: Add an action to the Scroll Trigger called "Add class". Select the current menu item and choose the class you want to apply to it, which will be used for highlighting.
Create a second action: Add another action to the Scroll Trigger called "Remove class". Select all the other menu items and choose the class you want to remove from them, so only the current menu item is highlighted.
Set the scroll step: Specify the scroll step in the Scroll Trigger settings. This value will determine the accuracy of the active menu item as the user scrolls.
Repeat for each menu item: Repeat the previous steps for each menu item in your sticky menu, adjusting the scroll offset and target sections accordingly.
Preview and publish: Preview your site in the Webflow Designer to see the menu highlighting in action. Make any necessary adjustments, and then publish your site.

By following these steps, you can ensure that the "current" menu item in your sticky menu is highlighted as the user scrolls through your website. This provides a seamless and intuitive navigation experience.

Additional Questions:

How do I create a sticky menu in Webflow?
Can I use different animations for the sticky menu in Webflow?
How can I optimize my Webflow website for SEO?

Is there a way to minimize the wobbliness of my Webflow site on an iPhone?

Can someone please help troubleshoot why my SVG animation created in SVGator doesn't work on my Webflow website? Thank you!

Can you help me figure out how to prevent body/page scrolling to the right while still keeping the sticky animation in my Webflow project?

Why is my scroll animation not working on mobile in Webflow, even though it works fine on other sections of the page?

Can someone help me troubleshoot why I'm unable to 'slide' or move an image on page scroll in Webflow?

How can I create a horizontal scrolling effect like an Instagram story on desktop using Webflow and a CMS generated Rich text field with multiple images and videos?

How can I create a navigation menu in Webflow where clicking on a menu item shows the corresponding section and hides the other sections at the same time, without needing to hand-code separate animations for each section?

How can I delay the playback of 4 separate infinite looping lottie animations in Webflow so that they all start at the same time once the page has finished loading?

How can I add a bounce effect or make an arrow move up and down on my Webflow site to grab the users' attention?

Can anyone help me with changing the color of an SVG icon in Webflow when hovering over it?