Hamburger menu overlay won't show X when clicked-CodePudding

Hamburger menu overlay won't show X when clicked. I have a problem showing X while menuToggle is active. When background-color set to any color, and toggle is checked then X dissapears. What is affecting it? I need X to be displayed in any color. it is shown in a codepen. Thank you!

/* Hamburger */
/* The hidden checkbox */
.menuToggle input {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 60px;
    opacity: 0;
    z-index: 1;
    margin: 1rem;
    cursor: pointer;
}

/* The container of the hamburger lines */
.menuToggle .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 50px;
  margin: 1.5rem;
}

/* All three lines of the hamburger */
.menuToggle .hamburger span {
  display: flex;
  background: black;
  width: 60px;
  height: 8px;
  margin-bottom: 8px;
  border-radius: 10px;
  transition: 0.2s ease-in;
}

/* Pushing the middle line of the hamburger to the left when not hovered*/
.menuToggle .hamburger .middle {
  position: relative;
  right: 10px;
  
}

/* Pushing the middle line of the hamburger to the right when hovered*/
.menuToggle input:hover   .hamburger > .middle {
  transform: translateX(15%);
}

/* Pushing the middle line of the hamburger to the right when checked*/
.menuToggle input:checked   .hamburger > .middle {
 transform: translateX(15%);
}

/* Making an X while menu is open */

.x-line {
  opacity: 0;
  position: relative;
  bottom: 32px;
  right: 9px;
}

.menuToggle input:checked   .hamburger > span {
  opacity: 0;
}

.menuToggle input:checked   .hamburger > .middle {
  opacity: 1;
  transform: rotate(135deg);
}

.menuToggle input:checked   .hamburger > .x-line {
  opacity: 1;
  transform: rotate(45deg);
}

/* Hides the menu when input not checked*/
.menuToggle .menu {
  opacity: 0;
  transform: scale(0.0);
  transition: 0.2s ease-in;
/* Menu styling*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: purple;
}

/* Styling the links in the menu*/
.menu li {
  list-style: none;
  font-size: 3rem;
  padding: 1rem;
  text-align: center;
}

.menu li a {
  color: black;
  text-decoration: none;
}

/* Shows the menu when input is checked*/
.menuToggle input:checked ~ .menu {
    transform: scale(1.0);
    opacity: 1;
}

/* Underlining menu links when hovered*/
.menuToggle .menu a:hover {
    background-image: linear-gradient(to bottom, #63646b 33%, transparent 100%);
    background-position: 0 1em;
    background-repeat: repeat-x;
    background-size: 2px 60px; 
}
/* End Hamburger */

https://codepen.io/asmsngusr/pen/BadvdJB

CodePudding user response：

You need to add z-index on .menuToggle input and .menuToggle .hamburger please check below answer hope it works.

/* Hamburger */
/* The hidden checkbox */
.menuToggle input {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 60px;
    opacity: 0;
    z-index: 2;
    margin: 1rem;
    cursor: pointer;
}

/* The container of the hamburger lines */
.menuToggle .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 50px;
  margin: 1.5rem;
  z-index: 1;
}

/* All three lines of the hamburger */
.menuToggle .hamburger span {
  display: flex;
  background: black;
  width: 60px;
  height: 8px;
  margin-bottom: 8px;
  border-radius: 10px;
  transition: 0.2s ease-in;
}

/* Pushing the middle line of the hamburger to the left when not hovered*/
.menuToggle .hamburger .middle {
  position: relative;
  right: 10px;
  
}

/* Pushing the middle line of the hamburger to the right when hovered*/
.menuToggle input:hover   .hamburger > .middle {
  transform: translateX(15%);
}

/* Pushing the middle line of the hamburger to the right when checked*/
.menuToggle input:checked   .hamburger > .middle {
 transform: translateX(15%);
}

/* Making an X while menu is open */

.x-line {
  opacity: 0;
  position: relative;
  bottom: 32px;
  right: 9px;
}

.menuToggle input:checked   .hamburger > span {
  opacity: 0;
}

.menuToggle input:checked   .hamburger > .middle {
  opacity: 1;
  transform: rotate(135deg);
}

.menuToggle input:checked   .hamburger > .x-line {
  opacity: 1;
  transform: rotate(45deg);
}

/* Hides the menu when input not checked*/
.menuToggle .menu {
  opacity: 0;
  transform: scale(0.0);
  transition: 0.2s ease-in;
/* Menu styling*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: purple;
}

/* Styling the links in the menu*/
.menu li {
  list-style: none;
  font-size: 3rem;
  padding: 1rem;
  text-align: center;
}

.menu li a {
  color: black;
  text-decoration: none;
}

/* Shows the menu when input is checked*/
.menuToggle input:checked ~ .menu {
    transform: scale(1.0);
    opacity: 1;
}

/* Underlining menu links when hovered*/
.menuToggle .menu a:hover {
    background-image: linear-gradient(to bottom, #63646b 33%, transparent 100%);
    background-position: 0 1em;
    background-repeat: repeat-x;
    background-size: 2px 60px; 
}
/* End Hamburger */

    <nav role="navigation">
      <div class="menuToggle">

        <input type="checkbox" />
        
        <div class="hamburger">
          <span></span>
          <span class="middle"></span>
          <span></span>
          <span class="x-line"></span>
        </div>
        
        <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        </div>
        
      </div>
    </nav>
  </div>
</div>

CodePudding user response：

You can fix your X button by adjusting the z-layer like so in your CSS:

.menuToggle input:checked   .hamburger > .middle {
  opacity: 1;
  transform: rotate(135deg);
  z-index: 1;
}

.menuToggle input:checked   .hamburger > .x-line {
  opacity: 1;
  transform: rotate(45deg);
  z-index: 1;
}