Is there a way to have the 'Current' class in the new Webflow Navbar widget focused on a page section?

Published on
September 22, 2023

Yes, there is a way to have the 'Current' class in the new Webflow Navbar widget focused on a page section. Here's how you can achieve it:

  1. Open your Webflow project and go to the 'Nav Bar' section.
  2. Select the 'Current' state for the Nav Link that you want to focus on a page section.
  3. Now, navigate to the 'Interactions' panel on the right side of the designer interface.
  4. Click on the 'New Interaction' button and select the 'Scroll Into View' trigger.
  5. In the trigger settings, choose the element that you want to scroll into view when the Nav Link is clicked. This can be a section or any other element on the page.
  6. Once you have set the trigger, go to the 'Affects' tab in the interactions panel.
  7. From the drop-down menu, select the 'Class' option and choose the 'Current' class.
  8. Finally, set the action to 'Add' and click on the 'Apply' button.

Now, when you preview your site or publish it, the 'Current' class will be added to the Nav Link when the corresponding section is in view.

This method allows you to create smooth scrolling between sections on your webpage and visually indicate the current section on your navigation bar.

Note: Make sure to set up unique IDs for the sections you want to scroll into view. This can be done by selecting the section, going to the 'Settings' tab in the right panel, and entering a unique ID in the 'Element Settings' section.

By implementing these steps, you can focus the 'Current' class in the Webflow Navbar widget on a specific page section and provide a seamless user experience.

Additional Questions:

  1. How do I create smooth scrolling between sections in Webflow?
  2. Can I customize the styling of the Webflow Navbar widget?
  3. What other interactions can be applied to elements in Webflow?