Streaming live at 10am (PST)

Hover/Background Scale effect on Nav links


#1

Hi, what’s the best way to apply a background scale effect when you hover on the nav links like this:

Thanks!


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


#2

Hi @dorcajada, those are just individual interactions with 0% to 100% slide out animation. Webflow can do this very well for “Mouse Tap (click)”. For hover, it’s not as easy to accomplish. Do it with a click trigger. They would all be individual divs with their own interaction.

The best way:

  1. Use On Selected Elements: Mouse Tap trigger
  2. Each Menu will have it’s own interaction
  3. The challenge is the div layer setup, that will actually takes some time but very doable

I have an example where you can see a Multi-Level Menu I was testing out. On my collection, it’s at the bottom of the page (2 Green Dropdown Menus)

https://preview.webflow.com/preview/gj-project-backup?preview=fe3759b3f1b4ca487673f8b2881e046c


#3

Thanks so much! Very helpful!


#4

Your welcome, have fun!


#5

Hi @dorcajada Is this what you are looking to do? I did this really quickly for you in Webflow: Here’s a link to the published site:

http://nav-bg-test.webflow.io/

Here’s a link to the Webflow site:

https://preview.webflow.com/preview/nav-bg-test?preview=a71a7081338d84cd350233161ec550e8


#6

Awesome!!! Thank you!


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.