iPad navbar issue

[SimonaZ (Simona)]

Hey everyone,

I’ve come across an odd problem.

My Navbar aligns itself to the right on the iPad landscape format. (Please find screenshot below)

I tried to play around with the styles of the Navbar and all of the layers within it - without success
So I’m hoping one of you Webflow gurus will be able to help me out with this

Thanks in advance!

---

Here is my site Read-Only: https://preview.webflow.com/preview/timberia-website?preview=2e17aea4c054f15aec94dd18a4866434

Live link: http://timberia-website.webflow.io/

[aaronocampo]

Hello @SimonaZ

Have you resolved the issue? I tried to find it but in my end everything looks normal.

[SimonaZ (Simona)]

Hi @aaronocampo,

Thanks for you reply, no unfortunately I haven’t resolved the problem, it’s still happening.

Are you looking at it through an iPad or just making the screen smaller, because the issue occurs only in iPad landscape format.

Thanks

[SimonaZ (Simona)]

Hi @vincent, I saw you’ve recently been online and you’re so good at finding problems . Is there any way you could help me with this please? Thank you!

[vincent (Webflow Expert)]

and you’re so good at finding problems

I wish I was as good at finding solutions ;-p

[vincent (Webflow Expert)]

I don’t get it. The ipad landscape, whetever the size of the ipad, is showing the desktop version.

In your capture, where is the logo ?

On my end, everything looks normal.

[SimonaZ (Simona)]

Sorry @vincent wrong choice of words!

The logo is that tiny white line next to the ABOUT link. I have checked it on two iPad 2s and both look wrong

[vincent (Webflow Expert)]

Ah, okay.

Safari is a bit stricter than Chrome. Especially when the dimensions of an element aren’t not specified. Chrome and Firefox are good at guessing dimensions, but Safari applies HTML stricly.

So give a height and a width to your brand element and a width 100% to the logo’s class.

[SimonaZ (Simona)]

Thanks for that @vincent.

The logo is now fully visible, but it’s pushed everything further to the right. I’ve also just checked it on both Chrome and Safari and it looks the same on both. I’ve attached a screenshot.

[vincent (Webflow Expert)]

Sorry. It’s ok on iPad for me. But iPad 2 is locked in an old iOS. The Safari version is way behind and that may be the issue.

To find how to fix it (fixing it is altering the css positionning properties of the elements of the menu, I guess), you need to understand why it bugs on iPad. Google how to inspect, with Safari on a computer, Safari on iPad. You’ll be able to use the inspector and see what bugs, and eventually find a solution for ipad safari.

Or redo the whole menu from scratch.

[SimonaZ (Simona)]

Ahh that sucks @vincent. Thanks for looking. Unfortunately I’m just a humble designer with no experience in code and that paragraph didn’t make much sense to me

I will try to redesign the Nav again, but if that fails is there anything else I can do without it being code related?

Thank you

[vincent (Webflow Expert)]

It should work if you don’t alter the navbar element too much. Test at each stage, each step.

What you can do also is to take the actual one, delete element after element and test, to see where there’s something that makes you older version of Safari bug.

Try also to delete your extra classes, revert to original or no class at all, keeping your structure. And from there, see if it bugs-. If it deosn’t, restyle your element again with new classes.