Mobile menu dropdowns hover state

I am trying to edit the appearance of my tablet and mobile menu dropdowns. Whenever I click to go to the hover state on a link inside a dropdown, as soon as I switch to the hover state, the menu disappears entirely from the screen and I can’t reopen it. This is happening in both Safari and Chrome.

As a side note, Webflow has also been crashing frequently the last couple of days, and when I try to submit a report, as requested, I get a warning that the report can’t be sent. I don’t know if this is related.

Any help appreciated! Thanks.


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

Can you please make a screencast and show the erroneous behaviour? It works for me more or less.

Thanks @dram. I’m not being allowed to upload a gif of my screencast. When I click on “hover” in the states panel, the menu immediately disappears from the screen and I can’t retrieve it. Sometimes Webflow also crashes when this happens. I’ve been going in circles with this for quite a while. Rather frustrating. This is only in tablet view or smaller – this is the mobile version of the menu I’m talking about.

CloudApp is an excellent tool for screengrabbing, you may want to check it out.

Which element are you talking about now? Nav Button Animated? I can see its hover without problems, but the settings on top and right margins for the hover state needs to be removed, otherwise it jumps around on hover. Maybe this is your problem?

49%20PM

Hi Dram,

Sorry to not be able to explain my problem more clearly – I do appreciate your help! I also realized my classes were confusingly named, and so I changed them hoping to clarify.

The problem isn’t to do with the nav button, although I appreciate your advice on that. The problem is to do with the menu itself, in tablet view and under, when it’s open. If I have the menu open and click on any of the menu categories, if I try to click on the hover state to change its appearance, the entire menu disappears. And it’s not set to display none.

menu-cats – after I do this, the menu disappears.

I hope this explains it? Thanks!

Understood! Well, you may try this not very exquisite approach: make your mobile nav to be visible on desktop and then modify your dropdown hover states. Depending on what you want to achieve this may suit you just fine. After the necessary changes just make mobile nav to be hidden on desktop again!

Thanks @dram. I appreciate your patient help with this! Alas, I tried your solution . . . and it didn’t work. Same exact thing happened.

I thought I would try all over again with a new menu all as one – without a separate mobile menu – and the exact same thing happens. Now I’m really bewildered!

OK, please tell me again which element’s hover you want to style? Maybe I am not looking at the right things.

I mean just name a class so that I understand 100%

Anything inside the mobile nav container. I can get as far as opening the menu and one of the dropdowns to bring up the dropdown list, but if I click on anything – whether it is a main dropdown or an item in the dropdown list, the menu vanishes and then I usually can’t even get it to reappear. For example: mobile-menu-category

Thanks for your patience and continued willingness to troubleshoot this for me! And apologies if my explanations have been more confusing than they should have been. I appreciate your help!

1 Like

I tried building a new navbar from scratch, with nothing else on the page, all as one piece (not making separate ones for desktop and mobile)… and it is doing exactly the same thing in the tablet-on-down views. I open up the submenu in tablet view. I click on an item inside the dropdown list, I go to the style panel and click on hover, and the entire menu completely vanishes from the screen. Same exact issue, with nothing else on the page. Could Webflow be having an issue

? I can’t imagine this is just me.

I was using Safari, switched over to Chrome to try that too, and now I can’t even open the tablet version of the menu at all. Nothing happens when I click on “Open Menu.” Google says my version of Chrome is up to date. I’m using a Mac, OS 10.12.

Share link to the plain navbar: https://preview.webflow.com/preview/navbar-demo?utm_source=navbar-demo&preview=5d7fad764b96fc9146facf5be7927575

Thanks again for you help – I’m mystified!

I have confirmed this is indeed unexpected behavior in the designer. The issue only exists when the :hover state is accessed in the designer, when the element is a child of the mobile nav, within the navbar component. It occurs at all breakpoints. Attempting to access the :hover state collapses the open menu. I have created a test I will submit a bug report.

2 Likes

Thanks @webdev for bringing this over to bugs. We’re investigating this right now and I should have more on this soon!

2 Likes

Thank you so much for looking into this!

1 Like

Hey, @CuriousChip! Thanks so much for posting on this. It looks like you’ve definitely found a bug. I’ve filed a report with the team and we’re currently working on a fix. I’ll let you know as soon as we push that out!

Let me know if you have any other questions and I’ll be happy to assist you further!

1 Like

Hi, @CuriousChip!

I wanted you to give you an update. We’re still workin on this issue, but in the meantime I wanted to provide you with a workaround so you can still make the changes you need to make. I created a short video to walk you through this.

CloudApp

Once we roll out an official fix for this I’ll post it here as well! Thanks so much for your patience!

1 Like

Thanks for checking in! And for offering the workaround, which I’ll try later today as soon as I get a chance. I do appreciate your work on this.

2 Likes

You’re welcome, @CuriousChip! We’re so glad to help! :bowing_man:

We appreciate your patience as we work to solve this issue. Thanks for bringing it to our attention!

1 Like

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