Ad

How To Hide Times Icon On Closed Side Slide Navigation?

- 1 answer

I'm customizing a Shopify template and I have created color picker from scratch. Now I have created a X button which closes sliding side navigation, and I wanted to place the X button outside the sidenav but when the side navigation is closed the button is still there. I have tried adding a lower z-index to it, and adding a higher z-index to header, and it didnt worked. I will be much thankful for the help.

Open Side Nav:

enter image description here

Closed Side Nav:

enter image description here

As you can see the X button stays after sidenav is closed.

My HTML:

<div class="sidetimes">

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

</div>

My 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;
}
Ad

Answer

I'm assuming your are using Javascript to control this animation? If so, the solution is to toggle a class on the body when the menu is "open"

See the example

$(".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 target="_blank" rel="nofollow noreferrer" href="#">Menu item 1</a></li>
      <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu item 2</a></li>
      <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu item 3</a></li>
      <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu item 4</a></li>
      <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu item 5</a></li>
      <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu item 6</a></li>
      <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu item 7</a></li>
      <li><a target="_blank" rel="nofollow noreferrer" href="#">Menu item 8</a></li>
    </ul>
  </div>
</nav>

Ad
source: stackoverflow.com
Ad