Menu Icon Doesn't Show Up In Safari On Desktop Or At All On Mobile

This is the mobile menu I have created for window sizes of 735px or less. The mobile menu icon (top right corner) doesn't show up in Safari on desktop or any mobile browsers (inclu

Solution 1:

Not sure why you're nesting fixed positioned elements but for whatever reason Safari is getting lost with it's layers because of it.

Adding the following solves your problem on Safari and mobile...

.mobilenavcontainer > .mobilenav {
  position: relative;
}

// BEGIN MOBILE NAV
function openMobile() {
  document.getElementById("myMobilenav").style.width = "100%";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}

function closeMobile() {
  document.getElementById("myMobilenav").style.width = "0";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}
// END MOBILE NAV

//  MOBILE DROPDOWN
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content\*/
var dropdown = document.getElementsByClassName("mobile-dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("mobileactive");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

document.getElementById("myMobilenav").ontouchmove = function(e) {
  e.preventDefault();
}

body {
  margin: 0;
}

@media (max-width:735px) {
  .nav {
    display: none;
  }
  .navcontainer {
    display: none;
  }
  header.Header.Header--top {
    display: none;
  }
}


/* END MAIN NAV STYLE */

.mobilehead {
  width: 120px !important;
  display: block;
  margin-left: 10px;
  padding-top: -10px;
}

#mobilehead {
  width: 100%;
  height: 80px;
  background-color: #e9e5fb;
  border-bottom: solid 1px #000;
  margin-bottom: 80px;
}


/* BEGIN MOBILE NAV STYLE */

.mobilenavcontainer {
  height: 100%;
  width: 0px;
  background-color: #e9e5fb;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 997;
}

.mobilenavcontainer > .mobilenav {
  position: relative;
}

#mobilemenuicon {
  width: 80px;
  height: auto;
  z-index: 5000;
}

.mobilenav .mobilemenuicon {
  top: 20px;
  right: 18px;
  position: fixed;
  z-index: 50000;
}

#mobilecloseicon {
  width: 80px;
}

.mobilenav .mobileclosebtn {
  top: 20px;
  right: 18px;
  margin-left: 10px;
  position: absolute;
}

.mobilenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #e9e5fb;
  overflow: hidden;
  padding-top: 120px;
  font-family: "AmerigoBT";
}

.mobilemainitems a {
  text-decoration: none;
  font-size: 3em;
  color: #000;
  display: block;
  -webkit-text-stroke: .75px #000;
  -webkit-text-fill-color: #e9e5fb;
  line-height: 50px;
  width: 180px;
}

.mobilemainitems {
  padding-left: 30px;
  padding-top: 0px;
  margin-top: -96px;
}

.mobilesocialitems a {
  text-decoration: none;
  font-size: 1.5em;
  color: #000;
  display: inline-block;
  font-weight: 400;
}

.mobilesocialitems {
  padding-left: 30px;
  line-height: 35px;
  top: 480px;
  position: absolute;
}

.row1social {
  padding-left: 50px;
  display: block;
  width: 250px !important;
}


/* dropdown button */

.mobile-dropdown-btn {
  font-family: "AmerigoBT";
  text-decoration: none;
  font-size: 18px !important;
  color: #000;
  display: block;
  transition: 0.3s;
  line-height: 54px;
  border: none;
  background: none;
  width: 200px;
  text-align: left;
  outline: none;
  margin-left: -11px !important;
  padding-bottom: 5px;
}


/* active class for active dropdown button */

.mobileactive a {
  background-color: none;
  -webkit-text-stroke: .75px #000 !important;
  -webkit-text-fill-color: #e9e5fb !important;
}


/* dropdown container */

.mobile-dropdown-container {
  display: none;
  background-color: none;
  padding-left: 20px;
  font-family: "UniversEx";
  font-size: 11px;
  padding-bottom: 20px;
}

.mobile-dropdown-container a {
  line-height: 32px;
  -webkit-text-fill-color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

.mobile-dropdown-container a:hover {
  color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

@media (min-width:736px) {
  .mobilenav {
    display: none;
  }
  .mobilenavcontainer {
    display: none;
  }
  #mobilehead {
    display: none !important;
  }
}

<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead" /></header>

<!-- BEGIN MOBILE NAV -->
<div id="myMobilenav" class="mobilenav">
  <a href="javascript:void(0)" class="mobileclosebtn" onclick="closeMobile()"><img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" /></a>
  <div class="mobilemainitems">
    <button class="mobile-dropdown-btn"><a href="#">Journal</a></button>
    <div class="mobile-dropdown-container">
      <a href="/journal">all</a>
      <a href="/journal?category=design">design</a>
      <a href="/journal?category=fashion">fashion</a>
      <a href="/journal?category=personal">personal</a>
      <a href="/journal?category=swoon">swoon</a>
      <a href="/journal?category=travel">travel</a>
    </div>
    <a href="/work">Work</a>
    <a href="/about">About</a>
    <a href="#">Contact</a>
  </div>
  <div class="mobilesocialitems">
    <div class="row1social">
      <a href="#" target="_blank">Twitter</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Instagram</a>
    </div>
    <div class="row2social">
      <a href="#" target="_blank">Pinterest</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Magazine</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Spotify</a>
    </div>
  </div>
</div>

<div class="mobilenavcontainer">
  <span class="mobilenav" onclick="openMobile()"><img id="mobilemenuicon" class="mobilemenuicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span>
</div>
<!-- END MOBILE NAV -->