Kevin Powell - Community•16mo ago

Making a responsive hamburger

Hello guys, today I am having trouble creating a hamburger menu for my webpage, even though I am not bad in css. My web is at the mobile phase so basically I want my hamburger button so that when I click for the second time my nav will disappear. My code: https://codepen.io/Adhurim-Gashi/pen/dyQEYzb

16 Replies

croganm•16mo ago

const toggleButton = document
  .querySelector(".toggle__button")
  .addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".nav").classList.toggle("open")
  });

const toggleButton = document
  .querySelector(".toggle__button")
  .addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".nav").classList.toggle("open")
  });

Then Somewhere in your css

Adhurim GashiOP•16mo ago

can you fix the problem on my code

croganm•16mo ago

.nav.open {
display: block;
}

.nav.open {
display: block;
}

I did

Adhurim GashiOP•16mo ago

and simply send me the codepen of it fixed

croganm•16mo ago

I'm on mobile Can't

Adhurim GashiOP•16mo ago

Ahhh I see

croganm•16mo ago

The JS can be fully replaced with what I sent Then just add that one line in css

Adhurim GashiOP•16mo ago

did you look at the html inside my code

croganm•16mo ago

The best way to track nav toggles is with classes

Adhurim GashiOP•16mo ago

should I change anything there?

croganm•16mo ago

Html doesn't need to be changed

Adhurim GashiOP•16mo ago

I have another question

croganm•16mo ago

It's just a one line change in the js and one rule add in css Sure what's up

Adhurim GashiOP•16mo ago

it is a more generalized one but still, did you like the way I formatted my code and my naming conventions like was my code easy to understand? because I've been doing some deep work in my css

croganm•16mo ago

I thought the naming conventions were very good. It made solving the problem quite easy

Adhurim GashiOP•16mo ago

@croganm thank you for fixing my problem.

Gaming

Programming

Making a responsive hamburger