I’m in way over my head. I have this nifty nav at the top with little animating lines. When you are on one of the main pages, the white underline is supposed to stay there like this
I thought this green class selector thingy was supposed to define that state, but it no longer seems to work, and the line never stays… What is that gree “current” thing called, and how do I define it?
Here is my site Read-Only: [LINK][1]
Here’s what you’re looking for;
And here’s how to apply this in your design;
(again, the read-only link is
[LINK][1]
Thanks for that, yeah the explanation seems intuitive, but when I go to edit these elements, I can’t figure it out.
When I open that nav component on the About Us page for example, I see when I select the Nav Link element:
That it has the psuedo-class “Current”. That is all fine, it is supposed to have that white underline. But when the tab is not current, there should be underlined. So what I don’t get is, why do the other tabs as they show in the designer, currently show an underline, even though they aren’t “current”:
For that matter, in the preview, what is making the underline dissappear and reappear on hover? The “Underline” is a different element than this “Nav Link”. Shouldn’t these states be assigned to the parent “Nav link Container” In which case the underline would be set to be not there unless in the hover or current states?
Watch the video again a few times. You’ve created an “underline” object on each of them, it’s not a styling and has nothing to do with the currently selected element.
In the video I delete them and turn it into a border to show you how.
Oh gosh, I didn’t see that you’d made me a special custom video, I thought it was just the webflow university video, I’ll check it out.
Thanks so much Michael, that helped a lot. I didn’t build this nav myself, but there is something that is lost in your version, and that is in the rollover state for those nav items which you can see on the live site at
I can see that each of these elements has triggered animation
When I open this “Nav link hover” action it seems it’s applying some animation to those underlines.
And so while editing, it appears that you can see those white underlines, but in preview they are gone because they are somehow only set to appear on rollover.
This is actually a nice UX on the logo. You wouldn’t want that underline on the Current state of the home page, but having some feedback on hovering on the logo is nice.
I can’t seem to figure out how to make that underline not disappear in the case that you are on the current page…
