CODEWITHSUNDEEP
javascripthtmlcsssafari
lucygoosey
lucygoosey

Reputation: 137

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 (including Chrome and Safari). I have a feeling I might be overlooking something obvious, but I just can't figure it out.

Could it be something to do with overflow:hidden? I found that if I disable it in my class .mobilenav, the menu icon shows up, but obviously, the close icon does as well. If this is the root of the problem, how can I fix it while keeping the menu's functionality intact?

Browsers it works in on desktop: Chrome 75.0.3770.142, Firefox 68.0, Edge 42.17134.1.0 Browsers it doesn't work in on desktop: Safari 12.1.1 On mobile, it doesn't seem to work in any browser. I checked both Safari and Chrome.

// 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;
}

#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 -->

Upvotes: 0

Views: 557

Answers (1)

Cue
Cue

Reputation: 2759

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 -->

Upvotes: 1

Related Questions