Problem with the Navbar on Mobile and horizontal

micheleprni · September 4, 2020, 1:41pm

Hello,

I seem to have a problem which I cannot visualize and solve on the Editor.
The navbar on Iphone Safari browser seems to have a padding around it.
I also tried Chrome Inspector tools but there it is visualized properly.
All the pages where I have applied the Navbar have the same problem.
By browsing it on mobile you can see it www.notaioangelinarossi.it/benvenuti
I have also uploaded a screenshot here: IMG-7942 — ImgBB

I am desperate, It has been two days I’m trying to solve this issue that seems more like a bug?!

Many thanks for your help,

Michele

Here is my site Read-Only: https://preview.webflow.com/preview/notaio-angelina-rossi?utm_medium=preview_link&utm_source=designer&utm_content=notaio-angelina-rossi&preview=b25f0c27f9debac2b6a3bc9fba8234bf&pageId=5ee125869232314df334d85d&mode=preview

Oli.Timmis · September 4, 2020, 2:14pm

Hey @micheleprni, this is very odd behaviour!

I have been able to replicate your problem. On Google Chrome (desktop and mobile), the navbar appears fine.

But on Safari (desktop as well as mobile), there seems to be a large amount of top-padding on your Navbar (see attached screenshot).

Have you reported this to Webflow support?

micheleprni · September 4, 2020, 2:37pm

Hey Oli, I forgot to say it! Yes it also happens on Safari, you are right.
The only problem is that Safari doesnt’ have any inspector and therefore I am not able to understand what cause it.
Positioning seems fine on Chrome.

I have not yet communicate it to Webflow support, what do you think I should do?

micheleprni · September 13, 2020, 5:03pm

SOLVED: The “Brand” component of the Navbar was set to align “Stretch”. I changed it to align “Center” and the problem was solved. In any case, the behaviour seems strange.