the hamburger menu is not showing in safari. it working fine on chrome and Firefox

Question

I have a responsive menu and its work fine in chrome and firefox but not working in the safari on mobile. the website builds with Elementor WordPress and I think adding some -webkit- will solve it but don't know how?

Answer 1

Some features don't work in Safari unless you have vendor prefixes. Like this:

Sticky headers

#sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color:cyan;
}

<div id="sticky">This is a sticky div.</div>
<p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </p>

Safari also doesn't support the details and summary elements. Use JavaScript.

for(var coll=document.getElementsByClassName("openbutton"),i=0;i<coll.length;i++)coll[i].addEventListener("click",function(){this.classList.toggle("active");var l=this.nextElementSibling;"block"===l.style.display?l.style.display="none":l.style.display="block"});

#menu {
  display: none;
}

.list {
  list-style: none;
}

<button class="openbutton">Open/Close</button>
<div class="menu">
  <ul class="list">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>