▼
Streaming live at 10am (PST)

Dropdown wont open on hover, only click

#1

I added a dropdown and selected “open menu on hover” but it wont open unless clicked. You’ll notice the dropdown on the top nav bar.

I’m on Google Chrome browser.

Preview link:
https://preview.webflow.com/preview/spaan009?preview=42dde3bd5ccf9c31f1503771943b3661

#2

the dropdown opens onHover for me

23 PM

#3

Yeah if you have a touch enabled device/computer it has been a known issue. Also, Chrome ironically has been reported to be intermittent, as well as, a few others. I would use a link block with hidden divs and interactions to make sure you get the effect you want in all browsers and devices.

#4

Thanks. I did think about building it from scratch but how can I make the div/dropdown remain visible once you hover away from the link?

#5

I’m a bit confused.
@aOne said the issue was with onHover.
How do you check for onHover… on a touch screen.

#6

Hi, I know what you guys are saying. There’s no way to check, it’s just a known issue, and varies on different browsers and touch devices. In IX2 interactions, there’s a note in the panel regarding “No touch support” for interactions.

I’ve checked and haven’t found any solutions to Dropdown hover functionality. Try contacting support directly and see if they have a workaround.

@ aOne & @Revolution - Regarding From Scratch:

  1. You’ll need 1 Div Wrapper, in the nav for all the contents
  2. If you need a video on how to create, I’ll be glad to help
#7

A video would be super helpful. But basically a div for each dropdown, containing both the link and the dropdown menu? That way it will remain open since the div contains all content?

#8

Yep, you’ll add a Div in the nav bar, next to the other links.

  1. Nav Bar: Height - add a specific size for all other contents
  2. Add 1 Div inside nav: Width - any size, H: 100%. Make it Flex, vertical if you want.
  3. Add Link Blocks inside this Wrapper. They can be set to Block because they will stack on top of each other.
  4. Inside each Link Block, drop in regular text element

You will set an interaction on the First Div which holds the others.

If you need help doing it, I can show you on a join me screencast. It’s not a super easy process, but not terribly difficult. It’ll take a little time.

closed #9

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