Streaming live at 10am (PST)

How do I make a button appear active for one page only when it's a symbol?

I have a main navigation bar that is a symbol so that it will appear on all pages. I would like one of the buttons to appear pressed when they are on that page so there is visual feedback that they are on that page. On this page I would like “future students”, the first button to look like it’s pressed but if I edit the symbol it will affect the other pages it is linked on. Is there another way I should do this?

You just need to add the symbol to the page and then go into the symbols area and click the unlink button. This will unlink it from the symbol. Keep in mind, if you modify the style on that, it will change on all the other versions of the symbol because it is style based. You must make a nested style for that particular instance of the button.

Thanks very much for the tip on unlinking the symbol and creating a nested style. That worked however I am curious about a style of “current” I see listed in the styles window that has a little lightening bolt by it. I can’t seem to delete it and the other buttons don’t have it. As far as I know I did not create this? Here is a screenshot of it.

Actually that is there for exactly your purpose. It is read as the current page. So if you style that it will appear for every instance of that button on whatever page you are on. Basically does your work for you. I forgot to tell you about this feature. You no longer have to do this manually. I would just drag a new version of the symbol out that is still linked and click into it to style the current state to whatever you want it to look like when you are on that particular page.

Ha ha - thanks! I have no idea how it got there but good to know! Thanks! :smile:

Whenever you go to a page that a link goes to, webflow notices and makes it into an active state automatically. Pretty cool!