Hi all, first time using the webflow forum. I’ve created a custom dropdown menu (symbol) and it is not displaying on mobile for some reason that escapes me. I’ve tried a number of things and nothing seems to work. I’ve only started optimizing today, so please bear with me on things looking a little weird. All I know is that the menu shows up when I shrink the browser window to a “mobile” size, but not on my iPhone 12ProMax. Tried both safari and chrome.
Please let me know if you need anything else from me.
Now regarding the menu bar disappearing on phone, in both webflow screen mode and firefox developer, the menu bar appears, but on actual phones it doesn’t. I’ve tried it with 3 phones and it didn’t show up in any of them.
I think this may be du to the animation effect? Have you tried to cancel the animation for tablets down to phones? You’re using hover effects to open up the menu. Try to create a separate animation for phones to open up the menu as a tab effect.
Hi,
I was about to say the same, I am facing the menu display on mobile from last couple of days. When I open my website in mobile they don’t show the menu bar. I have tried to cover this issue but could not do this. Need help regarding this. How can I solve this. Review my website where I facing issue dubaitraveltourism.
Thanks for the response Mehmet. I disabled the hover animations for tablet and mobile, but it did not do anything.
After that didn’t work, I then created a new menu (symbol) that would only display on tablet down. That did not work either.
After that, I made the mobile menu I created an instance rather than a symbol (I thought maybe the symbol was the problem), but that did not work either.
Hmmmm, I honestly don’t know what may be causing this. But I have an idea that will take sometime to implement.
Create a separate project, build the menu from scratch. Before you apply the animation, check if the menu operates on phones. Then start with the animation (one step at a time) after each animation step, check the phone if it still appears. If by the end of the animation, the menu still appears on the phone, try to copy this new menu into your original project.
If at some point the menu didn’t appear on the phone, you’ve discovered which animation step causes this, and you’ll try to work around it.
If so, i suggest that you use webflow’s navbar component and adjust it to your needs by using everything you’ve already created.
That way it will keep its accessibility features and probably work as expected.
Hi Maria, thanks for the recommendation. This has actually helped a lot. The nav bar (component) now appears on mobile, but I’m getting some weird movement on my animation on mobile.
The nav bar is 6VH tall, and the “dropdown” is 94VH tall, so it should take up only 100VH. However, when it opens, the dropdown part takes up the whole screen and the nav bar is lost below the viewport.
Again, this is only happening on my iPhone, and not when i shrink the window on the computer.
Anyone able to assist with this? It’s been very frustrating
After doing some deeper research, it looks like using VH is not best practice for mobile optimization. I changed the units from VH to % on tablet - mobile and managed to fix most of the issues. I’m going to close this and start a new thread for a new problem that this has (unfortunately) presented.
Hi there,
I was about to say the same, My website is not open Properly menu on mobile I have tried many time to solve this issue, but could not do this. Need help regarding this, Still looking for solution Check my website custom lithium ion battery
