How to get nav item to stay like this when you get to the nav item's page?

Design help Animations & Interactions
1

Sorry if our topic title isn’t describing clearly what we want…

On hover state, our nav items got the font in bold and a dot underneath. When someone clicks on ‘Contact’, the ‘Contact’ page loads.

What we would like is that the ‘Contact’ nav item to remain in bold with the dot underneath it (same as hover state), only when we get to the Contacts page. Similarly, if we click on ‘Blog’, this nav item should have the font in bold with the dot when we get to the blog page (we don’t have this page right now).

We thought of adjusting it from the “pressed state”, but the pressed state only applies to that page. Maybe we are doing something wrong? :woman_shrugging:

Can we get some direction on this please? Thanks!

Here is my public share LINK

2

The normal way to do this is to set the “nav menu item” Current (green class when you are designing on the current link page - so in this case the Contact or Home page)

You can’t (as far as I know) set current page in Interactions. But you can set the Box Shadow (try Outer shadow: 1px, 0px,0px Angle 180)

image

image

3

Sorry - still learning Webflow here!

So…we can’t make the Contact dot stay visible on the Contact page?

4

No, I don’t think so, because the dot is not part of the nav menu. It needs the “current” class (which is automatically added).
Interactions don’t understand “current page”

5

Good to know. Thanks for your help :slight_smile:

1 Like