i want to have animated underlines, while the line should not be longer than the menu word.
at the same time i want to have a separate color for the current page word, while the underline also is colored that way.
could anyone help me? this is so much easier in elementor/beaverbuilder, but at the same time, those two are getting on my nerves.
Hi @Eivinj it can be easily done with CSS. For underline animation examples you can check eg. CodePen. Here is an EXAMPLE but there is much more. Changing link color is simple on mouse hover task that can be done in Webflow options or with CSS.
I dont want the text link to be other on hover, i want the current state fo the link to be another colour, while keeping the animated underline as long as the menu Word. Im trying to replicate a function from smartmedia.no where they have something simmilar in the upper left menu. If you hover the links and check my read only you can see.
Edit: But I think I could still give some tips. I haven’t tested this, but you could probably make the “underline”-div a linkblock instead, to get the Current-class working. Then you style both the “HeadingLink” and "underline"s Current styles to be the same color.
Hi @robingranqvist sorry for my reply, the link I have posted was ONLY example where was changing more things than you want and NOT EXACTLY how you want. I have wrongly suggested then you looking for HOW it can be done. So I’m sorry and hopefully someone will give you EXACT example.
I think this is along the lines of what you’re looking for—although like I mention this is a pretty tricky workaround to make sure the text and underline color match based on the “Current” link state:
thank you very much. I really appreciate the work you put in to help me.
It’s fascinating to see how you solved this puzzle, hiding the underline with an animation instead of creating one.
By the way, how does this solution work with longer or shorter words than startside? would the underline or animation be to long compared to each separate word?
@robingranqvist i tried this now, and it seems like a perfect solution at first glance, but the underline still gets as long as the longest menu word, even if the shorter menu words are… shorter.
Of course!, hopefully it inspires you to consider new, creative ways to solve problems.
As with most things in web development, there are tons of ways you can go about solving problems, but it definitely looks @robingranqvist’s idea is another solution. That said, while it’s probably a bit easier to setup, it’s not really feasible long term as it requires updating multiple links each time to get it working correctly—which leads to a less than desirable experience for your users.
I’d still probably recommend looking into using square/rectangular svg element and using this as your “underline element” if you’d like a bit more flexibility with position and such while still being able to pull the text color. I haven’t tested this myself yet, but I can’t see why it wouldn’t work.
I don’t have access to my save (read-only links don’t allow saving work) but since it relies on a simple text underline it should only extend to the length of the word(s) on any given line.
i have been fiddling with this for a couple of hours now, i can’t believe how something this easy can be so time consuming.
I just want to say that i am very happy with the help and response i have gotten, but i still need some help to get this functionall.
1: @mikeyevin has a solution which works for text which dont have any charachters which dipps under like pgqy etc. because then the underline would go through, while the covering animation will conceal anything below the character baseline. while i also cant get the positioning and correct while following every step of the video.
2: @robingranqvist solution also works, but then the underline will be as long as the longest menu word, therefore creating a to long animated line on hovering shorter words.
I really like webflow, but sometimes it would simply be easier with elementor/beaverbuilder inside wordpress(which i really dont like).
Ah, good catch—my solution (stupidly) assumed there wouldn’t be any descenders, so you’d need to have your link text in all caps for this to work on different words.
In terms of @robingranqvist’s option, I believe you should be able to get the underline to match the length of your text (without extending to the length of the longest menu link)—just make sure you’re using inline-block elements.
Did you happen to update your read-only link with some progress for his solution? If so, I’ll take a look and see if I can’t get it working so it doesn’t extend beyond the word length. It’s worth noting, that if you ever have multi-line text links you’re going to definitely run into a similar issue that I don’t believe has an easy solution.
Webflow is great due to the flexibility but there’s definitely a learning curve. Elementor (and other similar apps) are great but typically can’t offer the same level of control when it comes to creating these types of interactions. It’d imagine there are situations where either could be an appropriate solution.
Yeah, it works now! Atleasts for my case, but if a client would like to change where a link is headed, the client would also need to change the link block destination to get everything correct.
However i am happy with it as it is now, but i find it a bit time consuming. I would wish that Webflow could make a solution for this.
Webflow!