Как скрыть значок времени при закрытой боковой навигации?

Question

Я настраиваю шаблон Shopify и создал палитру цветов с нуля.Теперь я создал кнопку X, которая закрывает скользящую боковую навигацию, и я хотел разместить кнопку X вне sidenav, но когда боковая навигация закрыта, кнопка все еще там.Я попытался добавить к нему более низкий z-index и добавить более высокий z-index в заголовок, и это не сработало.Я буду очень благодарен за помощь.

Открытая сторона Nav:

ЗакрытоSide Nav:

Как вы можете видеть, кнопка X остается после закрытия sidenav.

MyHTML:

<div class="sidetimes">

<i class="fas fa-times" style="font-size: 30px;"></i>

</div>

Мой CSS:

.sidetimes {
padding: 11px 30px 11px 10px;
background: #07c;
display: inline-block;
width: 27px;
border-radius: 0 5px 5px 0;
color: #fff;
cursor: pointer;
box-shadow: -10px 5px 14px 0px #444;
-webkit-box-shadow: 3px 5px 14px 0px #444;
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
-webkit-animation: sliding-panel-close-button-in .4s forwards;
animation: sliding-panel-close-button-in .4s forwards;
-webkit-animation-delay: .3s;
animation-delay: .3s;
position: fixed;
z-index: 9999;
top: 36px;
margin-left: 39.5px;
}

Answer 1

Я предполагаю, что вы используете Javascript для управления этой анимацией?Если это так, решение состоит в том, чтобы переключить класс на body, когда меню «открыто»

См. Пример

$(".open-icon, .close-icon").click(function(e){
  $("body").toggleClass("menu-open");
});

nav {
  position: fixed;
  top: 0;
  left: -100%;
  transition: 0.5s;
  height: 100%;
}

.nav-wrap {
  position: relative;
  width: 200px;
  background-color: #efefef;
  padding: 10px;
  height: 100%;
}

nav ul {
  list-style: none;
  padding-left: 0;
}

nav ul li {
  padding: 5px;
}

body.menu-open nav {
  left: 0;
}

body.menu-open .open-icon {
  display: none;
}

body.menu-open .close-icon {
  display: block;
}

.close-icon {
  position: absolute;
  top: 0;
  right: -30px;
  margin: 0;
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  line-height: 100%;
  display: none;
}

.open-icon {
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 10px;
  cursor: pointer;
  line-height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="open-icon">MENU</span>
<nav>
  <div class="nav-wrap">
    <p class="close-icon">&times;</p>
    <ul>
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      <li><a href="#">Menu item 7</a></li>
      <li><a href="#">Menu item 8</a></li>
    </ul>
  </div>
</nav>