Hi, this is my first post, I absolutely love Webflow and I always do my research when I struggle with something, but I can’t find answer to this. Hope you can help me.
I created a custom menu navbar for the tablet and mobile view of my portfolio site. I have to test tablet but on mobile, whenever I land on a new page, I have to scroll down just a little bit to make the navbar link tappable, allowing the content to appear.
There isn’t any problem when I scroll down normally. But let’s say I go to a page, and then I want to tap the menu link right away, without scrolling the page or doing anything else, it doesn’t work.
Before I go ahead, that’s a very well developed and beautiful looking site, really quality work!
I tested out your menu on my phone, and while it is fine on the homepage, it doesn’t seem to work on any other page until you scroll down a little bit. It does work fine on the Webflow preview but not in an actual mobile device. Because of this, I can’t test the changes myself, but here’s what I would suggest you try to begin with.
Place a div inside the page body, fixed, 0 pixels from the top, and ensure it has a width of 100vw. The height should be equal to the container of your menu trigger, which in your case is navbar-home-mobile
Place navbar-home-mobile inside this new div, and make sure the z-index is high enough so that no other element gets in the way. Try this out and let me know if it works.
thanks for your kind words. I really appreciate them .
I tried what you suggest. It didn’t work but while I was trying it I finally discover what the problem was, after several hours. So thank you!
I had a layer that I use for a loading transition, that goes to display none after the loading animation, but had the highest z-index. I still don’t understand why if it’s on display none (even with a high z-index) is causing me that tapping trouble.
If you have some opinion on that I would love to hear your thoughts, otherwise, I’ll close the post as solved.
.