Element State Changes/Remains While Associated Page is Viewed

I understand there’s no ‘State’ that an element can have that’ll remain only when its page has been loaded. I wonder what the most efficient way to recreate it would be. I’m fine with being pointed to articles on the Webflow site.

  • Basically, I’d like to click a button on the NavBar which opens another page.

  • I’d like that clicked button text to be underlined, or have a different colour, while it’s linked page is being viewed.

  • Click a different button, go to that page, and THAT button text is now underlined/coloured and the previously mentioned button goes back to its normal appearance.

My explanation looks convoluted. Imagine what my HTML looks like.

Cheers!
John

Here is my public share link:

https://preview.webflow.com/preview/copyrightmv?utm_medium=preview_link&utm_source=designer&utm_content=copyrightmv&preview=41af47d2a69a8d7f2b3fb4c8fce37922&workflow=preview

Hey, John! To clarify, you’re basically trying to style your navigation link differently if that is the page currently being viewed?

If so, you can definitely do that. Webflow has a selector that is automatically applied to a navigation link for the page currently being visited. You can style this however you’d like, and that’s the style it will place on the link for the currently visited page.
image

However, you can’t actually ‘select’ this selector to edit anytime. Because it’s automatic, it’s almost hidden in a way. The way to edit this is to go to a page, and select that page’s link, and then you’ll see the Current selector and can modify the style. Here’s how I worked around it:

  • Place a link block somewhere on your page, outside of your NavBar.
  • Give that link block the class name of Navigation Link
  • Set the link to whatever page you’re on

You should now see the Current selector applied, and can style as normal, then just delete the extra link block when you’re done. You’ll see in the screenshot below I am on the Testimonials page, editing this link block, and when I changed the background color, it also changed for Testimonials in the menu above.

Hope this helps. Let me know if I can clarify anything.

1 Like

This is fantastic Chris. Thanks so much!!!

Best regards,
John

1 Like

Works like a charm, Chris. And I appreciate how clearly you described the process.

One small question, and it’s a very small point, but in the interest of tidiness… when the website is first visited and lands on the Home page, the “Home” button is of course a different colour cuz that’s what we just set up.

Are you aware of a way to override that difference just on the first time the site and the Home page are visited?

That one I’m not so sure about. It sounds like it would require some custom code / a cookie set on the user’s side to track whether it’s their first visit or not and apply a style accordingly.

Thanks just the same, Chris.

For the time being I’ll just duplicate the Home page and remove formatting added. That’ll be the true Home page to first land on. Thereafter the Home button will link to the Faux Home Page that’ll change the button’s colour. We’ll see how that goes.

Much appreciated!