Foundation 5 Hamburger Menu on iOS 14

Foundation for Sites
#1

Hello everyone,
after updating to iOS 14 the Hamburger menu (made with foundation 5) fail to show up. It is there you can click it, but you cannot see it.
Here the website www.beerstrot.it

Any help or work around is appreciated. Thanks in advance
Andrea

1 Like
#2

Ever find a fix for this issue? I’m seeing it too.

#3

A quick work around:

  1. Add a link to font awesome in your head:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    or
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"/>
    or whatever you like
  2. Change the navbar html part as follow:
    from:
    <li class="toggle-topbar menu-icon"><a href="#"><span>MenĂš</span></a></li>
    to:
    <li class="toggle-topbar"><i class="fa fa-bars extra-space-hamburger"></i><a href="#"><span></span></a></li>

where extra-space-hamburger adjust the icon position through css

In my case the css is:
.extra-space-hamburger {
margin-top: 1.2rem;
}

#4

It seems that the new IOS has a problemwith the “box-shadow” property. Probably it will be fixed with the next update.

If you ar looking for a short term fix here is what i did in sass:

.tab-bar .menu-icon {
background: url(menu-iconn-path) no-repeat;
background-size: 2rem;
span {
display: none;
}
}

#5

Hi, I know I am late for the party :slight_smile: Please, since I am having the very same issue, is your solution implying that just removing the could fix the issue ?

#6

hi fefferico, can you explain better what do you mean with “just removing”. I do not understand your question.
thanks

#7

Sorry about it. I was talking about this line of code:

span {
display: none;
}

I therefore thought that instead of making it invisible we could just remove it. Obviously that does not work.

Since I am not using SaaS, and the font awesome icon is not a viable solution, what other paths do I have left? Going for an SVG?

#8

as a short term work around, if you are not concerned about design another solution is to add hamburger unicode ☰ in your html code and remove the class menu-icon (or you will see 2 hamburger menu in chrome and browsers other than safari.

here you can find hamburger icon unicode: https://graphemica.com/☰

Once apple fixes the issue revert back to actual code.

#9

Thanks a lot! One last thing: are you aware if it possible to find the very same foundation icon code? Like, the svg version for example.

#10

try to look here for foundation icons: https://zurb.com/playground/foundation-icon-fonts-3
or here how to create a svg hamburger https://css-tricks.com/snippets/svg/svg-hamburger-menu/

#13

@beerstrot Will this be fixed in the next iOS release by apple? Any idea?

#15

Thanks a lot! Thanks to your advice, I got two broken menus working on iPhone within five minutes.

#16

Is anyone else actually getting javascript errors as well on the touch of the hamburger icon after updating it?

I’m getting:

foundation.min.js:8 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
i.onTouchStart @ foundation.min.js:8
onTouchStart @ foundation.min.js:8