Streaming live at 10am (PST)

Nav bar is twice the width of body in mobile portrait view


#1

Hi,

My mobile nav bar worked well until recently. I am not sure what is happening. I feel like it is Webflow bug (meaning not caused by improper creation of the nav bar)
The nav bar is created using a div element (if click the little gear icon there is not settings for nav bar in the menu / I did not create this nav bar I am not very clear why it was created like this)

If you open this on a phone: http://open-data-impact-map.webflow.io/

You'll see the mobile nav bar is twice the width of body for mobile portrait view (zoom out you web page).

Also I attached an screenshot from my iphone 6s to show what is happening.

SHARE LINK: https://preview.webflow.com/preview/open-data-impact-map?preview=f4bfece7ed8a72b6e13fd2beeaf72b76

Thanks in advance - if there's any part unclear please let me know.

Update1: If setting the width to 77%, it will appear fine on iphone 6s. But it will appear shorter than body (presumably by 23% on a desktop browser if you shrink the browser). It seems like, webflow is getting the width of the screen differently for the nav bar and for the body. (Note: navbar is set to position fixed, and body is set to position absolute)


#2

If you enable your share link we can take a look and see what is throwing it out.


#3

Hi, thanks for replying, I just updated my share link.


#4

Hi @noahatode, it is your footer logos container throwing it out. It is set at 700px wide.
Quick way to see things like this is to enable X-ray mode (there are 6 icons at bottom left of webflow, it is the 3rd up from bottom) - that way you can see the hidden borders / sizes of elements.


#5

Thank you so much - this is immensely helpful! Hope you have a good day.


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.