Dropdown menu on hover - problems

Design help General
1

This is my first site build in Webflow and I’m getting up to speed. Up until this point, I’ve been able to figure out whatever problems I’ve incurred.

Hover, at this point I’m pretty baffled. I’m having problems with my navbar in the hover state.
I have all the link buttons on hover changing their text and background color as shown in the example below.

IMG_2988
IMG_29882921×1097 1.55 MB

However, when I hover over the drop-down button only the part I hover over changes!

IMG_8981
IMG_89811967×852 1010 KB

IMG_0073|690x267

IMG_0653
IMG_06531868×909 882 KB

I want all three to simultaneously change. What can I do to correct this problem? I appreciate any and all suggestions.

The site is a work in progress. The copy is far from complete.
Here is my site Read-Only: LINK

1 Like
2

Hello @paint.you1830

Can’t make it to work with the regular hover options, but you can make it work with the interactions panel. Here’s a screen record where you can see > https://www.useloom.com/share/7d8ff4b813214ac1854a875e56551883

If you have some questions feel free to reach out

Piter :webflow_heart:

3

Hey @paint.you1830,

You can make this work with CSS. Try the following:

  1. Remove the Nav Button class from the text block and the icon inside ‘toggle Background’

  2. With toggle Background selected, change the font colo(u)r to any random value, then change it back to rgba(255, 255, 255, 0.71)

  3. Finally, with toggle Background still selected, go into the hover state and change the font colour to #252525

Go back to the ‘none’ state and you should be all good.

4

Thank you so much. The video is absolutely brilliant.

1 Like
5

Thank you for taking the time to help me. Very clear and understandable instructions.

6

No worries @paint.you1830, more than welcome.