Kevin Powell - Community•2y 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•2y 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•2y ago

can you fix the problem on my code

croganm•2y ago

.nav.open {
display: block;
}

.nav.open {
display: block;
}

I did

Adhurim GashiOP•2y ago

and simply send me the codepen of it fixed

croganm•2y ago

I'm on mobile Can't

Adhurim GashiOP•2y ago

Ahhh I see

croganm•2y ago

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

Adhurim GashiOP•2y ago

did you look at the html inside my code

croganm•2y ago

The best way to track nav toggles is with classes

Adhurim GashiOP•2y ago

should I change anything there?

croganm•2y ago

Html doesn't need to be changed

Adhurim GashiOP•2y ago

I have another question

croganm•2y ago

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

Adhurim GashiOP•2y 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•2y ago

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

Adhurim GashiOP•2y ago

@croganm thank you for fixing my problem.

Gaming

Programming

Making a responsive hamburger