Kevin Powell - Community•10mo 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•10mo 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 Gashi•10mo ago

can you fix the problem on my code

croganm•10mo ago

.nav.open {
display: block;
}

.nav.open {
display: block;
}

I did

Adhurim Gashi•10mo ago

and simply send me the codepen of it fixed

croganm•10mo ago

I'm on mobile Can't

Adhurim Gashi•10mo ago

Ahhh I see

croganm•10mo ago

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

Adhurim Gashi•10mo ago

did you look at the html inside my code

croganm•10mo ago

The best way to track nav toggles is with classes

Adhurim Gashi•10mo ago

should I change anything there?

croganm•10mo ago

Html doesn't need to be changed

Adhurim Gashi•10mo ago

I have another question

croganm•10mo ago

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

Adhurim Gashi•10mo 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•10mo ago

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

Adhurim Gashi•10mo ago

@croganm thank you for fixing my problem.

Gaming

Programming

Making a responsive hamburger