Streaming live at 10am (PST)

Nav hover animation and styling the 'current' page


#1

Hi,

I want to be able create a hover effect similar to the one below and also have the line undernrth the menu item on the current page.

https://www.gitbook.com/pricing

Is this possible and are there any tutorials that’ll help me achieve it?

Thanks,


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @msh1411

Take a look at this thread, I made a video there, and also see the other posts further down the thread.

Always worth a quick check in the forum search tool as there are lots of great nuggets of info you’ll stumble upon :smiley:

tumblr_mq18t6Ta6X1rk133eo1_500


#3

Thanks @magicmark, I managed to do it but I think it’s probably a bit hacky as I had to put the line at 0.1% opacity as the beginning state. I haven’t been able to work out how to get the orange line to stay there on ‘current’ pages though.

https://preview.webflow.com/preview/marcuss-stellar-project-380172?utm_source=marcuss-stellar-project-380172&preview=0b74149ba99f31f8ec3dfd14d20083b6


#4

Why 0.1% ? You can just use 0% as initial state.

Here’s a video to show how to make the line show up on selected page… and a quick bit of info on reusing interactions, rather than duplicating them. :slightly_smiling_face:

CloudApp

Hope that helps!


#5

@magicmark Wow this is amazing, thank you so much for making that video. I spent too many hours on this and you did it in a few minutes :slight_smile:

I thought there had to be a way to reuse the interactions but weren’t sure how to go about it, that’s gonna save me a lot of time going forward.

I’ve pushed it to the mster site and it seems to be functioning correctly.


#6

Excellent, so glad it worked for you. :smile: You’re very welcome.

Could you leave your preview link live for a while please? I want to report the bug about the interactions not repeating in the designer. :pray:


#7

Sure, would 1 week be ok?

I have to say that Webflow is amazing. I’ve surprised myself with what I can do (with help of course). This is the first site I’ve ever built and it gives me hope that I can do it for clients too.

Saved me a ton of money too as I didn’t have to hire a developer like I did on my previous portfolio :metal:


#8

Should be great thank you so much.

It really is great, your site looks superb too. There are so many resources out there and the software is constantly evolving too. It’s very exciting to see what will be coming next! E-commerce, grid etc.

That’s exactly the goal of Webflow. Removing barriers and making the web accessible! :smiley: :webflow_heart: The community is amazing too.