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
CSS
19 Replies
JS
please ping me if you have found the anwser
@epic you have a typo
("data-visible", false)
not ("data-visbile", false)
@epicyou 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>thank you
i will playtest
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-...
im not saying the tutorial is wrong, im just saying that there is a more efficient way of doing it
ok
im gonna make those changes after i finish the video
that is a good idea
stick to the video, then try it out
the button still does not wrk
i might have to use a different tutoiral if this does not work
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
its sending nothing
its the inspect console correct?
its sending just nonthing
wait
i dont have the code to log it
can you take a screenshot?
or, better yet, make a codepen or jsfiddle, and try it there
of my console?
or smth else
console
and element inspector
but, just do the codepen thingy and we try it ourselves
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
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
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
like this
fixed
it
DEFER FIXED YESSSSSSSSSS
alr
solved now
awesome!