Streaming live at 10am (PST)

How to have active menu states on single page websites


#1

Has anyone ever made a one page site in webflow that has navigation active states depending on where you are at on the site.

Here is an example of what I'm talking about.

I know I could achieve this with some javascript after I export my project, but I'm wondering if it's possible to do this while still in webflow. Thanks for any potential tips that anyone might have.



#2

Hey @steelesong,

I recently achieved this on my single page portfolio (although I'm currently redesigning it so won't be able to link it here).

Follow this video tutorial https://youtu.be/R2kRyhf3wiU

Make sure each section has an ID name set and linked to each navbar link.

Hope this helps :slight_smile:

Best,
Naweed


#3

If your unique page have sections, give a unique ID to each section, and use that to link from the menu items to the sections.

When a section is shown on screen, the active status of the correspondent menu is triggered.


#4

Awesome. Thank you so much!


#5

@steelesong You're very welcome! @vincent explains it more clearer though :wink:


#6

C'mon you even provided a tutorial! :wink:


#7

You guys were both very helpful. Thanks! Love this community.


#8

Sorry to pop in the end of this thread like this. I've done this before in Webflow using the Navbar but is there any way of doing this with standard buttons or text links that aren't inside a Navbar component?

The page will scroll to the right place with no problems but I've yet to find a way to get the 'Current' style selector to appear on anything that's not located within a Navbar.

Thanks,

Mark


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.