Text states with dropdown menu button

Hi –

When rolling over a dropdown menu button in my nav bar, the text states only change if I roll directly over the text. If you are just over the button itself but not the text, nothing happens. Is there a way to fix this? (Everything aside from the Home link is a dropdown.)

My share link: https://preview.webflow.com/preview/wss-1194ad?preview=38aff9555e6e1802cfc509f46af33b89

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/wss-1194ad?preview=38aff9555e6e1802cfc509f46af33b89
(how to share your site Read-Only link)

Hi @CuriousChip great question and thank you so much for posting this!

What is happening is you have a class on the text element within the dropdown so that is overriding the styles from the dropdown element itself.

To achieve this effect, you will need to remove the classes from the text element, and then create the styles instead on the dropdown toggle element instead.

Here is a GIF showing the steps to achieve that hover style: Screen Recording 2018-04-27...

Please let me know if this is helpful or if you have any additional questions feel free to tag me @Waldo in your posts, I’m here to help :man_bowing:

2 Likes

Thanks so much @Waldo for your detailed answer, with video no less! Much appreciated! It makes sense to me now.

What program you use for record this GIF?

Hi @bro-design

I’m pretty sure @Waldo is using Cloudapp for that :slightly_smiling_face:

2 Likes

I have spent hours trying to figure this out myself, but am finally giving up and hoping @Waldo or someone else can help me, please. I want the top dropdown toggle buttons in my nav bar to link to pages on the website. I have gotten as far as knowing I have to add a link block. But for the life of me I cannot figure out how to style them so they match the rest of the buttons, and roll over the way they are supposed to, so if you hover over the box, but not the link itself, it will still change colors for the various states. I hope I’m making sense? I feel like I’m back to where I was when I first asked this original question! If anyone could help me figure this out, I’d be very grateful! Thank you! The share link is https://preview.webflow.com/preview/wss-1194ad?preview=235ee5e06a7342df038c29046497a6ad

Thank you @Waldo this is the best explanation of this!