Hey everyone! I’m having a hard time with the links in my Nav Bar. They are working perfectly in desktop, but not working at all in tablet or mobile. I tried re-creating the links and am having the same problem. I originally had linked text in div blocks, and now I have link blocks with text inside. Neither have worked. Please help!
I believe it’s because you have negative margin applied to elements below the nav bar - in mobile view this seems to make them overlap your nav bar and sit in front of your links.
EDIT: here is how it looks when you show all of the div boundaries… If I hide everything below the navbar in mobile view, the nav links work perfectly:
@Andy_Vaughan ah, I see! I’m new working with webflow and could not for the life of me figure out what the issue was. I moved the container and hero down out of the way and now it’s working perfectly! thank you so much!
@Andy_Vaughan got another question for you if you can take a look!
The mobile version has all this extra white space, but only when I look at it on my phone (not when looking @ mobile version on desktop)
and there’s a little random square on the screen. Any ideas?
So, I think it’s all to do with your animations and setting the initial state of your elements off-screen.
For any element which you have animated and which starts off-screen (e.g. the Hero Img that you have animated in the “Hero Img Animation”) I believe you need to “hide overflow”. I’m not sure if that should be on the element itself or on the animated element’s parent div.
Obviously if you have multiple animations starting off screen, you need to hide the overflow of them all.
Below is an image of the Hide Overflow setting:
I hope that helps, it’s tricky to tell for sure what will work as I can’t publish this and test myself.
I knew I had the same issue recently, I just couldn’t remember which of my projects it was in… just found it!
I’m sorry that I can’t share the project with you, however hopefully I can explain well enough.
In this screenshot below, you can see which element has an animation applied to it. That element has an initial state of starting 150px to the right of the screen, and so I ended up with the same white space as you.
What I did was apply the “hide overflow” to the animated element’s parent (highlighted in blue in the screenshot)
Unfortunately you can only tag one reply as “Solution” in any topic. May I advise that you tag my original response as the solution? This is so that anyone viewing this topic with the same problem that you originally raised in the future can jump straight to the right solution
