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 NAVfunctionopenMobile() {
  document.getElementById("myMobilenav").style.width = "100%";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}

functioncloseMobile() {
  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";
}

.mobilemainitemsa {
  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;
}

.mobilesocialitemsa {
  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 */.mobileactivea {
  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-containera {
  line-height: 32px;
  -webkit-text-fill-color: #000!important;
  -webkit-text-stroke: transparent !important;
}

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

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

<headerid="mobilehead"><imgsrc="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png"alt="Cathrine Khom"class="mobilehead" /></header><!-- BEGIN MOBILE NAV --><divid="myMobilenav"class="mobilenav"><ahref="javascript:void(0)"class="mobileclosebtn"onclick="closeMobile()"><imgid="mobilecloseicon"src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" /></a><divclass="mobilemainitems"><buttonclass="mobile-dropdown-btn"><ahref="#">Journal</a></button><divclass="mobile-dropdown-container"><ahref="/journal">all</a><ahref="/journal?category=design">design</a><ahref="/journal?category=fashion">fashion</a><ahref="/journal?category=personal">personal</a><ahref="/journal?category=swoon">swoon</a><ahref="/journal?category=travel">travel</a></div><ahref="/work">Work</a><ahref="/about">About</a><ahref="#">Contact</a></div><divclass="mobilesocialitems"><divclass="row1social"><ahref="#"target="_blank">Twitter</a>&nbsp;&nbsp;&nbsp;<ahref="#"target="_blank">Instagram</a></div><divclass="row2social"><ahref="#"target="_blank">Pinterest</a>&nbsp;&nbsp;&nbsp;<ahref="#"target="_blank">Magazine</a>&nbsp;&nbsp;&nbsp;<ahref="#"target="_blank">Spotify</a></div></div></div><divclass="mobilenavcontainer"><spanclass="mobilenav"onclick="openMobile()"><imgid="mobilemenuicon"class="mobilemenuicon"src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span></div><!-- END MOBILE NAV -->