Dropdown menu not working in Chrome

Design help General
1

Hi all,

New to this community so excuse me if this is the wrong type of post. I have a dropdown menu that doesn’t expand on however in Chrome. This issue is only new as it’s worked for over a year. Seems to be fine in Firefox and Edge.

To add to my confusion it does seem to work randomly in Chrome however I can’t seem to pinpoint if a previous action is what makes this possible. (the search icon on the header experiences the exact same issue as it should expand a search area but doesn’t most of the time in Chrome)

The site is https://www.definewatches.com.au/ and its the header dropdown menu items.

Any suggestions would be greatly appreciated.

Thanks

Matt

2

Hi @moonlight,

Thanks for the post. All Webflow related questions are welcomed here :slight_smile:

It really helps to share the link to the site published in Webflow, and/or the read-only link to the site having the issue: Share a read-only link | Webflow University

Send that info, it helps to check further.

As a side note, I did not see any console errors on the site link you provided, however the dropdown menu was not visible. I would check and remove any class styling overrides to any Display or Position styles, as changing those styles can affect to the visibility of the drop down in the open state.

I hope this helps.

3

Getting this exact issue now too. Site was working fine up until now but the client has reported that dropdowns are not working on hover anymore in Chrome. It works for me in Chrome so I am unable to tell where the issue could be.

4

Chrome Browser is the best web browser. But Sometimes dropdown menu is not working properly. you can use the Code in CSS File Zindex: 100000; for showing the drop-down menu. If your Internet Explorer is not working properly then please contact Internet Explorer Customer Service for better solutions.

5

Ah - I’m kind of glad to see this post, but then again I’m not.

My client is reporting this issue in Chrome - 2018-04-26_1046

But I DO NOT SEE IT! - Maddening

Reached to support. I’ll post back what they say.

6

Absolutely noting back from Support. Not like them so will try again…

7

Hi @StuyGoy27 thank you so much for reaching out to us! Definitely missed the initial message above, please feel free to tag me directly @Waldo any time in the future.

It looks like your client is most likely on a touch screen device where the hover events are not being captured.

Could you please try out this custom code workaround offered to see if that does the trick for your client?

8

@StuyGoy27 just figured out the solution and it will require the custom code below:

  <script>
$('.parent-dropdown').hover(function(evt) {
 	evt.preventDefault();
 	var openClass = 'w--open';
 	if (evt.type == 'mouseenter') { 
 		$(this).find('.w-dropdown-toggle').addClass(openClass); 
 		$(this).find('.dd-list').addClass(openClass);
       
 	}
 	else if (evt.type == 'mouseleave') { 
 		$(this).find('.w-dropdown-toggle').removeClass(openClass); 
 		$(this).find('.dd-list').removeClass(openClass);
      
 	}
 }); 
</script>

<script>
$('.nested-dropdown').hover(function(evt) {
 	evt.preventDefault();
 	var openClass = 'w--open';
 	if (evt.type == 'mouseenter') { 
 		
        $(this).find('.drop-second').addClass(openClass);
        $(this).find('.in-drop').addClass(openClass);
 	}
 	else if (evt.type == 'mouseleave') { 
 		
      $(this).find('.drop-second').removeClass(openClass);
      $(this).find('.in-drop').removeClass(openClass);
 	}
 }); 
</script>

Once that’s implemented you’ll need to select your parent dropdown elements and give them the class of parent-dropdown.

Then for your nested dropdown elements you’ll need to select those and give them a class of nested-dropdown.

So it will look like this in the Designer:
CloudApp

I’ve tested it on this end and that workaround was working without any issues here on desktop touchscreen devices.

I hope that this is helpful :man_bowing:

Big thank you to @sabanna for testing and figuring this out together :smile: