Navbar menu drop-down appearing in strange place on mobile view

Design help General
1

Hi,

When I click on my nav bar menu icon in mobile view, the drop down menu appears just off screen in the middle of the page, rather than under the icon. I’m not sure what could be forcing it to appear down there?

It appears just beneath the viewport no matter what the size of the viewport, which could be helpful in trying to figure out what is happening?

Thanks,
Tom

Here is my site Read-Only: https://preview.webflow.com/preview/tom-oboyle?utm_medium=preview_link&utm_source=designer&utm_content=tom-oboyle&preview=85187386ccd39333646e80bf63124a37&pageId=6294d980f265fc4e7d64a437&itemId=6294d980f265fc3a3f64a4d0&workflow=preview
(how to share your site Read-Only link)

2

Hey Tom,

I’m experiencing the same issue and whatever I do I cannot make the dropdown navmenu to appear right underneath the Navbar in all Mobile Viewports. In Preview Mode it looks okay, in live mode it’s the same problem you described. I saw that you’ve seemed to find a solution. How did you solve this problem?

Best
Max

3

Hi Max, so sorry, I’ve just seen this. I assume I am too late to help?

From memory, I think had to change the positioning of the navbar from static to relative.

Tom

1 Like
4

Yes! Static to relative. This was so helpful thanks for sharing.

I don’t understand how that fixes the problem though. Anyone have an idea?

I would expect ‘position: relative’ to follow the same behavior as ‘position: static’ when leaving left, top, right, and left values as the default of 0.