The CSS hamburger menu halves in size when being closed

I have successfully created a CSS/JS hamburger menu with a transforming icon upon clicking. However, I encountered a bug where, upon clicking the 'close' button on the hamburger, the navigation menu cuts behind the header, resulting in a messy appearance.

Currently, the menu opens correctly when the hamburger is clicked - at 100vh - but when it closes, it seems to go behind the header, giving the impression that it's at around 80vh. When closing it, my intention is for it to remain at 100vh.

I apologize for the lengthiness of the code.

Here is the code snippet:

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

Thank you in advance.

javascriptcss

Answer №1

Do you believe this is the simplest edit to make it function?

Made changes to position: absolute / flex

Also, rearranged the order of DOM elements (most important)

Hoping it didn't break anything :)

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent the hiding of a select element with jQuery Chosen Select

I am facing difficulty hiding a select element with the chosen-select class if it does not have any elements present. I attempted: $("#Category2").hide(); and also tried removing the chosen-select class before hiding the element: $("#Category2").re ...

javascriptjqueryjquery-chosen

What is the best way to ensure that two divs in the same row float in opposite directions?

Check out this JSFiddle to see what I have done so far: JSFiddle Link html <div class="results"> <h2>Some data</h2> <ul style="margin:0;padding:0;"> <li class="resultsListItem" style="list-style-type: none;"> ...

htmlcssalignmentcss-float

Error in MEAN CRUD operation cannot be determined

{ text: undefined, done: false, _id: 529e16025f5222dc36000002, __v: 0 } PUT /api/todos/529e16025f5222dc36000002 200 142ms - 68b Encountering an issue while updating my CRUD todo list. Despite receiving a successful status code of 200 after submittin ...

javascriptnode.jsmongodbangularjscrud

Is there a way to retrieve the ID from a span and convert it into a string format?

let wordSpan = '<span class="we w_o_r_d_s" id="we" contenteditable="false">we</span>' console.log(wordSpan.id); console.log(wordSpan.attr('id')); console.log(wordSpan.getAttribute('id')); let newDiv = document.c ...

javascriptjqueryhtml

Transform markdown into HTML code

Is there a way to effectively transform a string that resembles the following format: '* [-]Tree Item1', '** [-]Tree Item1-1', '*** Tree Item1-1-1', '*** Tree Item1-1-2', '*** Tree Item1-1-3', '** Tre ...

javascript

Is there a way to use JSON.stringify() to post multiple arrays at once?

Trying to send multiple arrays to the controller using Ajax post. Initially, there is a model structured like this: public class EnrollmentOptionsVM { public virtual string OptionID{ set;get;} public virtual string UserChoice { set;get;} p ...

javascriptajaxasp.net-mvc-3

What's the best way to get rid of the one-pixel gap between these elements on high-resolution displays like

http://jsfiddle.net/36ykrp9x/5/ HTML <div class="container"> <button>O</button><button>O</button> </div> CSS .container { width: 100%; background-color: rgb(120, 200, 200); text-align: center; } butt ...

htmlcssretina-displayretina

Utilizing Discord.js to enable a command for a particular channel

Running a Discord.js bot and struggling to figure out how to restrict the command! help to only the #commands channel. Already have the channel ID, so what steps should be taken in the command event to achieve this? Appreciate any guidance! ...

javascriptnode.jsnpmdiscorddiscord.js

Signal check indicates that the Internet connection has been restored

One of the key requirements for my app is to load data into a database, which necessitates having an active Internet connection. I have been contemplating what to do in case of network failure - perhaps I can store the data locally on the device and synch ...

javascriptangularjscordova

Enhance efficiency with Bootstrap typeahead prefetch capability

Currently, I am utilizing the Bootstrap typeahead API to generate a real-time search feature. The source option is quite useful as it enables an AJAX call to retrieve data from the server. However, I am interested in preloading the source upon page load a ...

javascriptajaxtwitter-bootstrapbootstrap-typeaheadtypeahead

update/renew angularjs unique directive

Incorporating the carousel plugin from Ionic Market into my ionic project has been a game changer. This specific plugin, known as Morph Carousel, is a custom AngularJS directive that allows me to display content in a visually appealing way. One unique as ...

javascriptangularjsangularjs-directiveionic-frameworkangular-directive

What is the best way to include an API key in the response to an Angular client application?

I'm working on transferring my API key from NodeJS to an Angular client application using $http, but I am unclear on the approach. Below is a snippet from my NodeJS file: // http://api.openweathermap.org/data/2.5/weather var express = require(' ...

javascriptangularjsnode.jsexpress

"Can you provide some guidance on transferring the selected row value to a button that is located outside the grid, including a parameter in v-data-table

<v-toolbar flat> <v-toolbar-title>Details</v-toolbar-title> <div style="width:100%"> <v-col class="text-right"> <v-btn id="btnCopy" @click="Redirect()" clas ...

javascriptvue.jsvuetify.js

Invoke a function within one component using another component

I am facing an issue with deleting playlists displayed on my page. These playlists are fetched from an external API and each playlist has a delete button which is supposed to remove the playlist both from the API and the view. The deletion process works s ...

javascriptvue.js

The validation for decimal numbers fails to function when considering the length

I've been struggling to come up with a regular expression for validating decimal numbers of a specific length. So far, I've tried using pattern="[0-9]){1,2}(\.){1}([0-9]){2}", but this only works for numbers like 12.12. What I'm aimin ...

javascriptangulartypescript

Verifying the Page Load Status in the Browser

I've been spending a lot of time lately trying to find code that will allow me to trigger an action after the browser finishes loading a page. After much searching, I finally came across this piece of code on <script> var everythingLoaded = s ...

javascriptjquery

fluid columns gliding from side to side

I'm currently working with Bootstrap to design responsive columns. My goal is to have the next column of content slide in from either the left or right side when the user clicks on the respective arrow button. While I have found solutions for fixed w ...

jquerycsstwitter-bootstrap

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

My website has a video in the header that works fine on desktop but not on mobile. I am using next.js 13.4 and here is my code: <video id="background-video" autoPlay playsInline loop muted classN ...

javascripthtmlreactjsnext.jsfrontend

Incorporating jsbi into a TypeScript project while adhering to strict mode

I have been developing a TypeScript library that relies on native BigInts. While it functions perfectly in Chrome, I encountered some issues with Safari. After some research, I stumbled upon the jsbi "polyfill" that seems to solve this problem. Unfortunat ...

javascripttypescriptbigint

What is causing Firefox to display an additional line in this section?

After much effort, I've been attempting to eliminate the extra spacing on this page in Firefox: Do you see the menu? If you compare it to Chrome, you'll notice that the menu is positioned too low beneath the background, giving the layout a broke ...

htmlcsshtml-lists