I am new to webflow(website building in general) and currently facing the following issue:
I created a custom menu with an integrated dropdown menu. This seems to be working perfectly on Desktop, iPad horizontal & iPad vertical. However, on Mobile Landscape and Vertical, the issue occurs. The links inside the dropdown menu won’t open, unless with a long press (where the preview pops up and you can then open the page).
I read that, it might help to build the menu again from scratch using new classes. While doing so on a test page I noticed that my original menu works now perfectly fine on mobile too, BUT only on the test page.
That’s why I am hoping to find here someone who has faced this issue or in general is a webflow pro. Thanks in advance!
The issue is well hidden. It is within the “what we do” dropdown menu, that it is visible.
Also if I check the mobile version of the website (lets say on the chrome browser using the developer responsiveness tool and using any of the view options e.g. iPhone 12 Pro), than it works fine also for any other smartphone model.
However, in the real world, if I open the website on my phone (iPhone 11 Pro), and press on the “what we do” dropdown, I will see the different menu options (“film-production”, “conception/consulting” & “FAQ”). It is here when I try to select/ click one of the options that it will not work. On the other hand, when opening the “element builder” page (which I use to test out new elements), the dropdown options work fine.
I can send also a video if it helps to understand better where the issue is occurring.
Hi @sam_13 I thing that your issue is related to hover state. Your nav is set to be open on hover but touch screens doesn’t know what hover state is and it may cause that it presume you meant to use haptic touch. I’m not 100% sure if this is what is causing your issue but it may be the way you can experiment with.
something to read:
What you can do is to create a copy of your navigation in a new project and set it on standard click and see if this will work for you on touchscreen devices.
If you would like to preserve open on hover on desktop you can create identical nav for mobile only (with open on click) and switch (hide/show) between these two.
You have to keep in mind that these “tools” doesn’t emulate how website behave but only how they look as they still using OS browser that is totally different from browsers for mobile devices. For this reason I would not recommend to use these tools as reliable reference and some of these emulations really sucks.
If you would like to use external free app for DESIGN preview you can look for ResponsivelyApp. It doesn’t solve issues to reliably deal with functionality but you can have design of more than one device next to each other in one go.
This sound promising! I will try this approach and see if this will fix the issue. Thank you so much for helping me out on this matter
And also I agree about having to optimise the website in general as currently for mobile is a pretty painful experience. I reckon it has to do with how I “created” the page loader and also in general file size being too big.
So new update: I created a copy of the original nav bar and adjusted the dropdown to only open upon click (aka I deselected the “open on hover” option). Now the new purple nav bar menu, keeps behaving the same way as the original nav bar (grey) although I duplicated all elements from the new nav bar and renamed it so it won’t affect the original nav bar.
Not sure why it still behaves the same way as the previous nav bar. I screen recorded how both nav bars react on mobile in the “element builder page”. It seems to be the only page where the links on the dropdown menu are clickable. Maybe I have something on the other pages which block the dropdown links?
oki I found the issue! the element that I created called “eb-cursor” was blocking the dropdown links. Not sure why because I added some custom code .cursor {pointer-events: none;} that apparently should make all the links clickable. Maybe for now I remove the custom cursor to have a functional website
