NavBar Hambuger Menu IOS Safari Broken

[Fernando_Comet]

Hi!

I have a site working ok in Chrome, FF and Safari.
In certains versions of IOS (iPad, iPhone) there is a bug on the hamburger menu: It does not show the menu items properly as the last item is not shown.

My menu has four items: La Cantina, La Carta, Los Clientes, Los Cantineros.
The last item is not shown (on some IOS browsers):

Here is my preview link: https://preview.webflow.com/preview/lacantinasonora?utm_medium=preview_link&utm_source=designer&utm_content=lacantinasonora&preview=5c833448632f4abb14a7e9a7e2d20f3a&workflow=preview

Also the site is published at https://www.lacantinasonora.com/ (exported code)

I have seen similar issues in the forum but they seem old as this:

Mobile Navigation Broken, other content moving to foreground (Safari)

Hi everyone, I’ve started to redesign my website with a template however have a problem in Safari/horizontal iPhone. When pressing the mobile menu somehow other elements (logo) move in the foreground. Chrome displays it correctly (see below) but in iOS/Safari the horizontal view menu is completely broken and content from the “back” shows through. I’ve tried to fix this with z-index but wasn’t able to solve it. What am I not seeing? Thanks a lot! Here is my public share link: Link [26][0…

There is a possible solution by @PixelGeek recommending to do two different nav bars, one for desktop, one for mobile. My question is: How should my mobile navbar be different from the other?

Any other help is welcome
Thanks a lot

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Fernando_Comet]

Finally I solved it doing a second NavBar only for Mobile, taking out the House pic.

I tend to think problems arise with the component “Brand” from the NavBar