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
croganm15mo 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
Adhurim Gashi15mo ago
can you fix the problem on my code
croganm
croganm15mo ago
.nav.open {
display: block;
}
.nav.open {
display: block;
}
I did
Adhurim Gashi
Adhurim Gashi15mo ago
and simply send me the codepen of it fixed
croganm
croganm15mo ago
I'm on mobile Can't
Adhurim Gashi
Adhurim Gashi15mo ago
Ahhh I see
croganm
croganm15mo ago
The JS can be fully replaced with what I sent Then just add that one line in css
Adhurim Gashi
Adhurim Gashi15mo ago
did you look at the html inside my code
croganm
croganm15mo ago
The best way to track nav toggles is with classes
Adhurim Gashi
Adhurim Gashi15mo ago
should I change anything there?
croganm
croganm15mo ago
Html doesn't need to be changed
Adhurim Gashi
Adhurim Gashi15mo ago
I have another question
croganm
croganm15mo ago
It's just a one line change in the js and one rule add in css Sure what's up
Adhurim Gashi
Adhurim Gashi15mo 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
croganm15mo ago
I thought the naming conventions were very good. It made solving the problem quite easy
Adhurim Gashi
Adhurim Gashi15mo ago
@croganm thank you for fixing my problem.
Want results from more Discord servers?
Add your server