CSS hamburger menu cuts in half when closing

user_12640056 0
Viewed 108

I've successfully coded a CSS/JS hamburger menu which has a transforming icon when clicked. However, I've just discovered a bug where, when the hamburger 'close' button is clicked, the nav menu cuts behind the header making it look messy.

Currently, the menu opens correctly when the hamburger is clicked - at 100vh - but when it closes, it appears that it cuts behind the header, so it looks like it's at about 80vh. When it's closing, I'm wanting it to remain at 100vh.

Apologies in advance for the lengthy code.

Here's my code:

// Variables

let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");


// Function

function hamburgerActive() {
  line1.classList.toggle("active");
  line2.classList.toggle("active");
  navList.classList.toggle("active");
}

// Event Listener

hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universal-header-container {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
}

.universal-header-hamburger {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#hamburger {
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  cursor: pointer;
  z-index: 99;
}

.hamburger-span {
  height: 5px;
  width: 30px;
  background-color: #342b38;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

#hamburger-line-1.active {
  transform: translateY(7.5px) rotate(-45deg);
}

#hamburger-line-2.active {
  transform: translateY(-7.5px) rotate(45deg)
}

.universal-header-logo {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universal-header-basket {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#hamburger-nav-list {
  height: 100vh;
  width: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: yellow;
  transition: all 0.5s ease-in-out;
}

#hamburger-nav-list.active {
  height: 100vh;
  width: 30%;
  position: fixed;
}
  <header class="universal-header-section">
    <div class="universal-header-container">
      <div class="universal-header-hamburger">
        <div id="hamburger">
          <span id="hamburger-line-1" class="hamburger-span"></span>
          <span id="hamburger-line-2" class="hamburger-span"></span>
        </div>
      </div>
      <div class="universal-header-logo">
        <a href="index">
          <h2>Logo</h2>
        </a>
      </div>
      <div class="universal-header-basket">
        <a href="basket">
          <i class="fas fa-shopping-cart fa-2x"></i>
        </a>

      </div>
    </div>
  </header>


  <div id="hamburger-nav-list">
    <div class="hamburger-container">

    </div>
  </div>

Thanks in advance.

css javascript
1 Answers

Think this is easiest edit to make it work?

Changed the position: absolute / flex

Also the order of DOM elements changed around (most important)

Hope it didnt break anyting :)

// Variables

let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");


// Function

function hamburgerActive() {
  line1.classList.toggle("active");
  line2.classList.toggle("active");
  navList.classList.toggle("active");
}

// Event Listener

hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universal-header-container {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
}

.universal-header-hamburger {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#hamburger {
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  cursor: pointer;
  z-index: 9999;
}

.hamburger-span {
  height: 5px;
  width: 30px;
  background-color: #342b38;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

#hamburger-line-1.active {
  transform: translateY(7.5px) rotate(-45deg);
}

#hamburger-line-2.active {
  transform: translateY(-7.5px) rotate(45deg)
}

.universal-header-logo {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universal-header-basket {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#hamburger-nav-list {
  height: 100vh;
  width: 0;
  top: 0;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: yellow;
  transition: all 0.5s ease-in-out;
  position:absolute;
}

#hamburger-nav-list.active {
  height: 100vh;
  width: 30%;
  position: fixed;
  z-index: ;
  display:flex;
}
  <div id="hamburger-nav-list">
    <div class="hamburger-container">

    </div>
  </div>
  <header class="universal-header-section">
    <div class="universal-header-container">
      <div class="universal-header-hamburger">
        <div id="hamburger">
          <span id="hamburger-line-1" class="hamburger-span"></span>
          <span id="hamburger-line-2" class="hamburger-span"></span>
        </div>
      </div>
      <div class="universal-header-logo">
        <a href="index">
          <h2>Logo</h2>
        </a>
      </div>
      <div class="universal-header-basket">
        <a href="basket">
          <i class="fas fa-shopping-cart fa-2x"></i>
        </a>

      </div>
    </div>
  </header>

user_53009210
Related