Streaming live at 10am (PST)

Issue with mobile navigation


#1

Everytime I export the website it adds top: 100% to the .w-nav-overlay. I have to go in and remove it manually everytime. What is causing this?


Here is my site Read-Only: https://preview.webflow.com/preview/vr-2?preview=3cbc4a5e16ca2958e39d576f1236a724


#3

Hi @William_Burgess

Thanks for posting about this.

I’ve done some testing on this end and it looks like this top: 100% is included by default with the nav component.

I am curious to see, though, why this is included in the first place. I’ve reached out to our developers and will let you know what I hear back.


#4

@William_Burgess I chatted with the team a bit more. That css is to push the nav overlay down off the screen until the navmenu is opened up . At which point clicking on that element (i.e. outside of the navnenu) closes the nav menu.


#5

Once I publish the website to my server I have to remove that line of CSS for it to work correctly. If I don’t when you press the menu button on mobile it opens the menu, but its more than half way down the page. You have to scroll down to see it.


#6

Hi @William_Burgess

I did some testing on this end and it looks like the top 100% doesn’t push the nav menu down on the default nav component. It looks like there are few other styles causing this issue.

You can resolve this by setting the navbar to position relative instead of static, and then you can set the nav menu back to default settings of position: absolute. The last step would be to make the nav menu full height/width again which you can do by setting width: 100% and height: 100vh. Here’s a video: https://cl.ly/1Y3D102I0v3k

Once this is done, you can export and the menu should work as expected without having to remove top: 100%.

I hope this helps!


#7

Ok, so I did what you said and now it covers the entire header so you can’t close the menu.