responsive mobile button isnt working

im currently following a tutorial on how to create a responsive navbar put im struggling as i cant make the mobile button to work i use no libs on my site here is all my code needed HTML
<header class="primary-head flex">
<div>
<img src="./images/smallicon.png" class="logo">
</div>

<button class="mobile-nav-toggle" aria-controls="primary-nav" aria-expanded="false"><span class="sr-only">Menu</span></button>

<nav>
<ul id="primary-nav" data-visible="false" class="primary-nav flex">
<li class="active">
<a href="new.html">
<span aria-hidden="true">00</span>Home
</a>
<li>
<a href="new.html">
<span aria-hidden="true">01</span>Download Center
</a>
<li>
<a href="new.html">
<span aria-hidden="true">02</span>Chat
</a>
</ul>
</nav>
</div>
</header>
<header class="primary-head flex">
<div>
<img src="./images/smallicon.png" class="logo">
</div>

<button class="mobile-nav-toggle" aria-controls="primary-nav" aria-expanded="false"><span class="sr-only">Menu</span></button>

<nav>
<ul id="primary-nav" data-visible="false" class="primary-nav flex">
<li class="active">
<a href="new.html">
<span aria-hidden="true">00</span>Home
</a>
<li>
<a href="new.html">
<span aria-hidden="true">01</span>Download Center
</a>
<li>
<a href="new.html">
<span aria-hidden="true">02</span>Chat
</a>
</ul>
</nav>
</div>
</header>
CSS
.logo {
margin: 2rem;
}

.primary-head {
align-items: center;
justify-content: space-between;
}



.primary-nav {
list-style: none;
padding: 0;
margin: 0;

background: hsl(0 0% 100% / 0.8);
}

@supports (backdrop-filter: blur(1rem)) {
.primary-nav {
background: hsl(0 0% 100% / 0.8);
backdrop-filter: blur(1rem);
}
}

.primary-nav a {
text-decoration: none;
}

.primary-nav a > span {
font-weight: 700;
margin-inline-end: .5em;
}

@media (max-width: 35em) {
.primary-nav {
position: fixed;
inset: 0 0 0 30%;
padding: min(20vh, 10rem) 2em;
flex-direction: column;

transform: translateX(100%);
}

.primary-nav[data-visible="true"] {
transform: translateX(0%);
transition: transform 350ms ease-out;
}

.mobile-nav-toggle {
display: block;
position: absolute;
z-index: 9999;
background: url(./images/menu_FILL0_wght400_GRAD0_opsz24.svg);
background-repeat: no-repeat;
width: 1.75rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
border: 0;
}
}
.logo {
margin: 2rem;
}

.primary-head {
align-items: center;
justify-content: space-between;
}



.primary-nav {
list-style: none;
padding: 0;
margin: 0;

background: hsl(0 0% 100% / 0.8);
}

@supports (backdrop-filter: blur(1rem)) {
.primary-nav {
background: hsl(0 0% 100% / 0.8);
backdrop-filter: blur(1rem);
}
}

.primary-nav a {
text-decoration: none;
}

.primary-nav a > span {
font-weight: 700;
margin-inline-end: .5em;
}

@media (max-width: 35em) {
.primary-nav {
position: fixed;
inset: 0 0 0 30%;
padding: min(20vh, 10rem) 2em;
flex-direction: column;

transform: translateX(100%);
}

.primary-nav[data-visible="true"] {
transform: translateX(0%);
transition: transform 350ms ease-out;
}

.mobile-nav-toggle {
display: block;
position: absolute;
z-index: 9999;
background: url(./images/menu_FILL0_wght400_GRAD0_opsz24.svg);
background-repeat: no-repeat;
width: 1.75rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
border: 0;
}
}
19 Replies
epic
epic14mo ago
JS
const primaryNav = document.querySelector(".primary-nav");
const navToggle = document.querySelector(".mobile-nav-toggle");

navToggle.addEventListener('click', () => {
const visibility = primaryNav.getAttribute("data-visible")

if (visibility === "false") {
primaryNav.setAttribute("data-visible", true)
navToggle.setAttribute('aria-expanded', true)
} else {
primaryNav.setAttribute("data-visbile", false)
navToggle.setAttribute('aria-expanded', false)
}
});
const primaryNav = document.querySelector(".primary-nav");
const navToggle = document.querySelector(".mobile-nav-toggle");

navToggle.addEventListener('click', () => {
const visibility = primaryNav.getAttribute("data-visible")

if (visibility === "false") {
primaryNav.setAttribute("data-visible", true)
navToggle.setAttribute('aria-expanded', true)
} else {
primaryNav.setAttribute("data-visbile", false)
navToggle.setAttribute('aria-expanded', false)
}
});
please ping me if you have found the anwser
Mannix
Mannix14mo ago
@epic you have a typo ("data-visible", false) not ("data-visbile", false) @epic
ἔρως
ἔρως14mo ago
you are also using 2 different attributes to do the same thing just stick to area-expanded you can style the <nav> to be hidden by doing button[area-expanded="false"] + nav { display: none; } also, instead of the <ul> consider using <menu>
epic
epic14mo ago
thank you i will playtest
epic
epic14mo ago
im just going off this tutorial https://youtu.be/HbBMp6yUXO0?si=OOwaCHywt_2mqTMC but this could of changed since this is 2 years ago
Kevin Powell
YouTube
Responsive navbar tutorial using HTML CSS & JS
You can find the Frontend Mentor project here: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3 And the free Scrimba course here: https://scrimba.com/learn/spacetravel 🔗 Links ✅ Why I use HSL: https://youtu.be/Ab9pHqhsfcc ✅ More on feature queries (@supports): https://youtu.be/wPI8CEoheSk ✅ More info on .sr-...
ἔρως
ἔρως14mo ago
im not saying the tutorial is wrong, im just saying that there is a more efficient way of doing it
epic
epic14mo ago
ok im gonna make those changes after i finish the video
ἔρως
ἔρως14mo ago
that is a good idea stick to the video, then try it out
epic
epic14mo ago
the button still does not wrk i might have to use a different tutoiral if this does not work
ἔρως
ἔρως14mo ago
does it show any errors in the console? because "doesnt work" is super broad it can vary from memory errors, bad hardware or even display bugs to the javascript being loaded before the element exists
epic
epic14mo ago
its sending nothing its the inspect console correct? its sending just nonthing wait i dont have the code to log it
ἔρως
ἔρως14mo ago
can you take a screenshot? or, better yet, make a codepen or jsfiddle, and try it there
epic
epic14mo ago
of my console? or smth else
ἔρως
ἔρως14mo ago
console and element inspector but, just do the codepen thingy and we try it ourselves
epic
epic14mo ago
wait what.. it works in the JS fiddle nah bro so my code works in JS fiddle but now im getting a error on the actual website new.js:4 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at new.js:4:11
epic
epic14mo ago
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
ἔρως
ἔρως14mo ago
add defer to the script, if it is in another file if it is in the same file, move it to the end of the <body>, as the last element there
epic
epic14mo ago
const primaryNav = document.querySelector(".primary-nav");
const navToggle = document.querySelector(".mobile-nav-toggle");

navToggle.addEventListener('click', () => {
const visibility = primaryNav.getAttribute("data-visible")

console.log(visibility)
if (visibility === "false") {
primaryNav.setAttribute('data-visible', true)
navToggle.setAttribute('aria-expanded', true)
} else {
primaryNav.setAttribute('data-visible', false)
navToggle.setAttribute('aria-expanded', false)
}
});

defer
const primaryNav = document.querySelector(".primary-nav");
const navToggle = document.querySelector(".mobile-nav-toggle");

navToggle.addEventListener('click', () => {
const visibility = primaryNav.getAttribute("data-visible")

console.log(visibility)
if (visibility === "false") {
primaryNav.setAttribute('data-visible', true)
navToggle.setAttribute('aria-expanded', true)
} else {
primaryNav.setAttribute('data-visible', false)
navToggle.setAttribute('aria-expanded', false)
}
});

defer
like this fixed it DEFER FIXED YESSSSSSSSSS alr solved now
ἔρως
ἔρως14mo ago
awesome!
Want results from more Discord servers?
Add your server