Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT

[@MinhPham-eh6lr]

The fact that he codes with one leg up in the chair is amazing

[@pythoncenter6148]

I do that as well

[@kantuo]

I do that as well

[@ptoato1205]

I do that as well

[@GamingTSH]

❤️👉 kzbin.info/www/bejne/op6sqIyCe76Nb7c 👈❤️.

[@shonshaji4416]

Thats what i was thinking 💀😂😂😂

[@Danilo0717]

1. "Great personality 2. You're a great teacher 3. You got a new sub!" 4. best dynamic!

[@henningsieh]

same here... since a week or so 😃 very cool dude with a massive ... ehm, coding speed, she said!! 🤓

[@alwaysawakening4603]

@@henningsieh that's what she said ;)

[@user-fq9ct5iu3c]

copied

[@valencefootball9740]

​@@user-fq9ct5iu3c ​ ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

[@araskoca8172]

Same

[@markmariscal5111]

One of my favorite things about Ed is his relevance ...such as "what did I miss". I can not tell you how many times I have said this to myself as I was programming lol

[@rorycantellow2973]

I love the way you just winged this and fixed stuff on the fly. That teaches a lot. I followed along and broke so much cos I wasn't paying attention then had to fix that myself. Ultimately I was laughing so loud trying to do something so simple ... learnt a lot. And I think that is when stuff sticks. Brilliant.

[@saurabhmah84]

For all those who navLinkFade animation is not working, i.e. links are not visible after the burger opens and animation is not working or opacity value is still 0 after the burger open; please see below code change in CSS that needed to be made. 1. Under "@media screen and (max-width: 768px)", you need to add animation element in ".navlinks li" section. .nav-links li{ opacity: 0; animation: navLinkFade 5s infinite; } And voila! Your animation should work just fine :) Lot of Thanks @Dev Ed for doing this video. Taught me lot of new things. Keep up the good work bro.

[@ianxven]

my code still not working, the opacity still 0, what should i do?

[@yournewfarther]

for anyone stuck at 27:10 link.style.animation = `navLinkFade 0.5s ease forwards ${index /7}s`; console.log(index / 5 + 0.2); don't use a comma use the sign close to the "1" on your keyboard

[@manojadhikari9911]

thanks.....stucked at it for too long..xd

[@consoledoterror971]

its called the legendary `BACKTICKS`.

[@billssssss]

we usually call that ' tilde ' key

[@pradnyabhukan5891]

dude, thank you so much!!

[@kaz_key]

thanks! I didn't notice at all !!

[@bigdaddy2620]

1. Love your personality 2. You're a great teacher 3. You got a new sub!

[@boblitex]

I love the fact you take us through your design thought process. debugging and all. interesting stuff

[@ayanarko8890]

kzbin.info/www/bejne/f5LYZWqVisqZntE -- image sliding animation using html & css

[@GamingTSH]

❤️👉 kzbin.info/www/bejne/op6sqIyCe76Nb7c 👈❤️.

[@weldakota5821]

I think I learned more in this 35-minute video than I did from hours and hours of tutorials online.

[@HarshYadav-cj3yu]

You know why i am Watching you, what makes you stand out of all is: After Watching your videos I learn something, and be actually able to do it on my own.

[@murtazahussain6301]

IF ANYONE HAS THE PROBLEM THAT LINKS DON'T APPEAR WHEN THE RESPONSIVE NAVIGATION IS EXPANDED! instead of => ' Use this sign => ` in the command link.style.animation = `navLinkFade 0.5s ease forwards ${index/5+0.5}s`; This sign is present below the escape button on your keyboard.

[@attractiveguy6495]

OMG thax

[@adrianvalencia3210]

I don't normally reply here on KZbin, but I watched this tutorial in its entirety and had this issue, I was not able to fix it until I changed my single quotes to the grave marks. Thank you so much for the hotfix! I appreciate it greatly.

[@paulinarybak8649]

You just saved me! Thanks

[@martinperens]

Dude you are the man :D but as im new on the javascript and just begining to learn it, can you tell me whtas the differents => " => ' => ` . why it didn't work with " and ' ?

[@murtazahussain6301]

@@martinperens I think it takes ' ' as a string and ` ` as a script

[@nikolaskoev]

Hi Dev Ed. Great tutorial! As a little tip. If you set {min-width: 30%}; and add a margin to each list item of 10px, that sorts out the issue with the spacing of nav links from laptop to tablet viewport width which you experienced at minute 14:00. Thanks again!

[@nassimnaouli9720]

Time stamps: 1:24 - HTML 2:57 - CSS 19:55 - JavaScript

[@federicoraulmaciasaparicio1339]

I'm glad to know that I'm not the only one that keeps forgetting how to remove those odious bullet points

[@GamingTSH]

❤️👉 kzbin.info/www/bejne/op6sqIyCe76Nb7c 👈❤️.

[@etsy96]

the fact that he always have a "that's what she said" line, makes it a hundred times better

[@ayanarko8890]

kzbin.info/www/bejne/f5LYZWqVisqZntE -- image sliding animation using html & css

[@codigodesenior3995]

@@ayanarko8890 wtf random video

[@Lindeberg91]

Don't apologise for your videos being long. You are amazing! 🙏🏻

[@xyzzyx9357]

I don't know how one hour passed so easily. You are fun to watch and great to learn. Thanks. After watching this video now I am feeling confident to create a navbar on my own.

[@janidudealwis]

This helped me Alot. I was stressing out on an error. just a line of code from this video fixed that error. Im so thankful to you

[@ibrahimhc19]

I watched this video 6 months ago when I started studying web development, and I couldn't understand anything past the CSS part of the video. I watched it again today and could understand everything, I'm still not a junior level though, but I'll keep pushing myself on until I get there. Thanks

[@thechargeblade]

Great Work as always Edd, I am backend developer currently tutorial my way to front-end dev. for those who are actually trying in on their mobile phone and have extra space on the right side just add minimum-scale=1 on your meta after initial-scale=1, it will remove the visible hidden nav links on the right. cheers

[@SeeRjED]

You sir are a legend! Thanks :)

[@dinucarcusov7289]

Man, thanks.

[@lato_o]

[@fahanyc3638]

Achmad, thanks a lot! I knew I would find the answer here. You are the best!

[@angelordonez2959]

I LOVE YOU!

[@tinasheyadley]

"I actually thought that was too big, that's what she says". You're ridiculously funny😄, I love your content!

[@gurejalectures]

When you made this type of projects then please save them in one playlist. You are great bro

[@ayanarko8890]

kzbin.info/www/bejne/f5LYZWqVisqZntE -- image sliding animation using html & css

[@ayanarko8890]

kzbin.info/www/bejne/f5LYZWqVisqZntE -- image sliding animation using html & css

[@craftheavenco]

Man have you try laughing and typing at the same time, man I'm having so much fun coding. Thank you!!

[@thedailyhappening416]

Well, I was watching a Tv Series but for some reason, I wanted to check this video for a couple of minutes to watch it later. But, here I'm 35 minutes later commenting. It was thrilling to see you find those error that was happening and fix it when it happens, Loved that. It was like I was watching a wizard do a magic trick. :D

[@rh-gp5yy]

This is the best responsive navbar from scratch tutorial so far! I've always been only knowing the bootstrap style for responsive navbar. However, I fell in love with this one. Thank you very much .

[@GamingTSH]

❤️👉 kzbin.info/www/bejne/op6sqIyCe76Nb7c 👈❤️.

[@russomario]

Great video Ed! For anyone who's having problem with "overflow-x: hidden" not working properly on Safari try this: html, body { overflow-x: hidden; position: relative; }

[@parthshah1206]

thank you so much it worked for me

[@GH-pu3xc]

About 30 minutes wasted before i thought to search 'overflow-x' in the comments! 🤣

[@Mazami09]

This will serve me so good. Thank you. - I noticed a typo in paddding, but still everything worked fine haha - Also, when you shrink the window to make it responsive, I can see the bar closing in automatically the first time I do this. I haven't been able to figure out how to fix it yet

[@theXtroyer1221]

me too i have the 2nd problem you said

[@var1541]

I have the same problem, I can see the menu closing.

[@var1541]

​@@theXtroyer1221 I've got the fix for it: under the media queries add display: none; to .nav-links and then add display: flex; to .nav-active;

[@theXtroyer1221]

@@var1541 oh ok gonna try it

[@var1541]

@@theXtroyer1221 nvm it removes the slide transition completely, a temporary fix is to ignore above things and just remove the transition property of nav-links, this keeps the opening transition but it closes abruptly.

[@yalinkhere8212]

please make big tutorial like creating form login, register, and email activating membership. big thank sir.

[@hollychen967]

Top tip guys! If you are new to HTML and finding really hard to follow him because he is really fast, just slow down the video to 0.5 and it will become easy to follow. Good luck.

[@hollychen967]

However, he does sound a bit drunk and it's a bit funny.

[@saren79able]

My dear. I'm very glad you're accurately explaining it. I do not hear and yet I understand all of you. Thank you very much. Hope you can continue learning.

Dude, this is excellent! Especially since I'm just getting started in the world of the Front End. You have an extraordinary way of teaching, with a very clear didactics. Thank you!

[@TheStrandedMoose]

THANK YOU for making a comprehensive, free tutorial for this :) This was actually better explanation than some of the udemy tutorials I've seen

[@ayanarko8890]

kzbin.info/www/bejne/f5LYZWqVisqZntE -- image sliding animation using html & css

[@GamingTSH]

❤️👉 kzbin.info/www/bejne/op6sqIyCe76Nb7c 👈❤️.

[@marcocoelho2219]

For everyone with the problem of overflowX hidden not working.(17:12) My solution was to change de position from absolute, to fixed. This is at the media max-width 768px

[@truemc2619]

Thanks this worked great for me

[@JustinTokarsky]

To clarify this, you change the position in the .nav-links under the @media screen and (max-width:###px) to be fixed, instead of absolute.

[@toddb1208]

Had 5 years off developing and had forgotten everything. You Fucking saved my life dude! Thank you so much! finally a tutorial i can understand the english and he codes like i was taught.

[@stefankruik9807]

Really helped me with my school project! I have to make my own full website in about 2 weeks. So glad this tutorial is so good!

[@ayanarko8890]

kzbin.info/www/bejne/f5LYZWqVisqZntE -- image sliding animation using html & css kzbin.info/www/bejne/gKW2Z4GVr5dmaaM -- sliding effect kzbin.info/www/bejne/eXeknpuveqdkgNk -- image animation

[@wastedart1794]

Thx for this tutorial, had forgotten all about CSS animations, thx you for restarting my interest for CSS :)

[@ayanarko8890]

kzbin.info/www/bejne/f5LYZWqVisqZntE -- image sliding animation using html & css

[@deepanshidixit7908]

this guy has a great vibe (lowkey crushing on him ;p) btw thnks for such a great video its just what i needed

[@wonjaehwang7670]

That was dope it was pretty good because you explained your thinking behind a lot of what you were coding thank you!

[@ayanarko8890]

kzbin.info/www/bejne/f5LYZWqVisqZntE -- image sliding animation using html & css

[@NealHartsChannel]

Love listening to you talk out loud so we can hear your thought process! Turned out really nice! Thank you

[@Root-uno6nw]

After 3 hours of searching , I can honestly this is one of the one of the best videos on how to make a dynamic website. Thanks man!!

[@krust_]

If you copied the code exactly and are wondering why when you click the burger nothing happens, make sure you linked the javascript in the body of the html and not the head.

[@nkululekonkosi1365]

Where can i get the codes because i followed the video but am not getting the view and output he gets.

[@wenzzplayz7569]

tnx brooo

[@damiank444]

"its too big, thats what she said" - that made me laugh XD

[@alicesanchez9830]

I reversed the video to double check I wasnt tripping... that made my day! Lmao💜

[@ahmedrobi6507]

great jokes for 10 year olds

[@tang3151]

@@ahmedrobi6507 hahahaha eDgY

[@chadvise3308]

@@ahmedrobi6507 you doggggggggggggg shit

[@shahriarsharar8363]

Sir please find me the nav-link class he declared

[@Neropser]

Well if anyone else had the problem that when you switch from desktop size to screen size the menu would fade out like you closed it (seen: @34:40), move "transition: transform 0.5s ease-in-out;" to .navlinks-active. Great video thank you

[@ColinArkell]

This kind of works but then the transition is taken away when you close it. Anyone have a fix for this?

[@ArMoNiGS1905]

css-tricks.com/stop-animations-during-window-resizing/

[@selvin9845]

HEY BRO, I GOT LOST AS SOON AS YOU STARTED DOING JavaScript :D LOL IT'S BEEN LOTS OF FUN!! THANK YOU :-)

[@kirankamath5891]

look at him man, he is loving what he is doing

[@sgr2683]

Its really fun to learn with you , (your reactions)its how I also used to do while coding !!! Keep it up, we need the teachers like you. Thankyou so much: and ya! I am your new SUBSCRIBER.

[@unasemana]

HI, the solution for the problem caused on minute 34 is to move (transition: transform 0.5s ease-in;) in .na-links and pasted it on the class .nav-active

[@SomelitzOLL]

thank you

[@shahidullahmiazi]

@shadowtecc20 Absolutely work. Please watching video carefully.

[@developedbyed]

Feel free to leave any questions and suggestions :)

[@bizzle98]

can u maybe zoom in on the code next time?

[@developedbyed]

for sure!

[@VNighte]

Dev Ed Can you please share your code to play with? Big thanks. :)

[@nesnes6689]

can you show me how to create dinamic page website thanks dev. :D

[@mkreativ7541]

Hi, the (transition: transform 0.5s ease-in;) will cause the nav-links to ease-out if you play with the width of the browser (media)

[@pdqbpunuvnun3519]

3 years later, your video helped me a loooooot. thank you so much!!!

[@sewingwithcope]

Really loved the tutorial. I used it to create a navbar on my personal website. Everyone thinks the mobile navigation is amazing.

[@desequilibradoo]

Hey @Dev you should put transition:transform 0.5s ease-in; in .nav-active class not in media query,because ease-in effect apperas everytime when you minimize the screen.

[@developedbyed]

Very true! I posted a response in the comments but it probably got lost. Thank you!

[@desequilibradoo]

@@developedbyed Can you please tell me which visual studio code theme do you use?

[@TheAncientss]

But then the animation doesn't appear when closing the nav

[@msn.muddam]

Hi @desequilibradoo may I please know where he puts the .nav-active class? It's not shown in the video

[@eng101dspprojcectabo]

@@msn.muddam in media queries section of your css page, move the line of code under .nav-links that says "transition: transform 0.5.s ease-in" and put it in the .nav-active section instead

[@CaughtSurfingNiagra]

Hi Ed, minor correction: .nav-active should get the background-color, not the @media screen nav-links. Otherwise you will have it jumping, when dragging from desktop to mobile. Really cool video. I appreciate it.

[@unasemana]

im having that problem, how can i solve it?

[@justinas2036]

Thanks :)

[@LucasMeadows]

@@unasemana Change the transition in .nav-links{} to 'transition: all 0.5s ease'. Take out the background color from .nav-links and put it into .nav-links active. It means the background color will fade in and out slightly but it stops the nav from jumping on and off page when adjusting window width.

[@live7katie]

@@LucasMeadows I've been scrolling through all these comments and checking stack overflow and this was the solution that worked for me when nothing else fixed it, thank you!!! Saved my project!

[@LucasMeadows]

@@live7katie No probelm :) glad it helped

[@cyatophilumfr]

Thank you so much for this tutorial! I like the fact that it looks so clean and is scalable with the number of links. So easy to integrate in a website! I even included dropdown submenus with ease. Also don't worry about the video length, we can watch it in x1.5 speed ;)

[@GamingTSH]

❤️👉 kzbin.info/www/bejne/op6sqIyCe76Nb7c 👈❤️.

[@misteralfie]

I actually never knew a way to animate properly and the way you've shown is pretty easy to understand so thanks

[@rhodyasomani6099]

Hands down the most comprehensive tutorial for a responsive nav bar. 5 stars

[@timrobinson1278]

Great video! I couldn't get "overflow-x: hidden" to work. BUT. Change "position: absolute" to "fixed" in .nav-links. Solves the problem.

[@cankarkadev9281]

Thank you for that hint! Solved it for me as well :)

[@timrobinson1278]

@@cankarkadev9281 Glad I could help :)

[@dancalinfota6157]

you are a hero. struggled for hours with that thing

[@angel-tylebron6111]

so yall telling me you didn't notice the "mynigga" file under recent @1:19 lmaoooooo

[@angel-tylebron6111]

y'all*

[@thatguycheddar]

@@angel-tylebron6111 LOOOL i just saw it

[@antwarior]

yoooo hahaha , but have to say this video is great content though

[@ozzyfromspace]

lol As a black guy, I approve #mynigga

[@akionka]

LMAO. 🇷🇺🇷🇺🇷🇺🇷🇺

[@De_Bryan]

Good stuff. Only had an issue when referring to the class names. 'nav-active' instead of "non-active". Thanks.

[@supertech8208]

this guy is just chilling and making the vid, but he is really good. Loved your teaching Note - You earned a subscriber

[@005akashkumar5]

I have started my web development journey and was struck how to add burger. This was so helpful.

[@quietlab.5727]

Thanks a lot! *How to make the menu closing when i click or tap the outside of menu?*

[@permanar_]

You just need to add a new listener to *body* and do repeat the code. See the big line? Small tips: You can also make it close every time you press the 'Esc' on your keyboard! (cool isn't it?) Search for keyup and also add the listener. I hope this help you a bit and good luck for the challenge!!

[@rendelllasola66]

For those who are struggling with body { overflow-x: hidden; } still scrolling on safari, try changing it to only overflow: hidden.

[@AwesomeComps23]

hi, if you could help me that would be great, for some reason my foreach loop isn't working, it doesn't grab the index. here is my code : const navSlide = () => { let menu = document.querySelector(".menu"); let nav = document.querySelector("#nav-bar"); let navLinks = document.querySelectorAll(".menu li"); /*Menu Toggle Function*/ menu.addEventListener('click', () =>{ nav.classList.toggle("menu-active"); }); /*li animate function */ navLinks.forEach((link, index) => { console.log(index); }); } navSlide();

[@Ninjer]

@@AwesomeComps23 same, can't figure out why

[@wussonchan]

Hey Ed! I love your tutorials! I have a problem though, at the start of the JS the nav doesn't slide out. Does anyone else have the same problem? How did you fix it?

[@mary0180]

Pierce Russon have it too...

[@eugenepaul5196]

@@mary0180 i had the same problem but i just removed the dot before the nav-active class - nav.classList.toggle('nav-active');

[@mary0180]

Eugene Paul Cabauatan thanks, i‘ve added .nav-links.nav-active { transform: translateX(0%);} at the end and now it shows

[@luisrocha2762]

@@mary0180 where you add?

[@mary0180]

Luis Rocha before .nav-active

[@MadeSimple22]

This helped so much for me as I am only a beginner. I tried so many other videos and they all didn't work. Great tutorial, keep up the good work.

[@SyedShujashah]

Instead of increasing width to create space, you can always induce padding. This way there will be always space between li,s and hence it wont break at various screen width. Of ours this will cause Major overflow issues but no one really has a screen 600 px wide.

[@Geel-Doon]

Dev Ed thanks bro, the best turtorial ever👌👌!!!! but it would be far better if you share the code files with us please .

[@sako3xx]

my js is the same as yours.. but it wont slide out..

[@augusth4444]

Amazing video! thank you for the help, keep up the good work :)

[@null4008]

I learned A LOT! Wow what a great tutorial. I subscribed. Thank you. Looking forward to watching more from you!

[@freddieshen8359]

I struggle with navigation bars a lot Ed. Thank you for posting this (even though it was awhile back) Just found your channel today and I am looking foward to watching all of it!

[@GamingTSH]

❤️👉 kzbin.info/www/bejne/op6sqIyCe76Nb7c 👈❤️.

[@birsingh5388]

overflow-x: hidden not working on Chrome, do you have any idea how to fix this?

[@nolafer_channel]

html, body { overflow-x: hidden; }

[@vengeancecreed217]

same. it tried html,body and that hasn't worked either

[@viktorassakalauskas5908]

Same problem, does anyone have a solution to fix this?

[@Richard-us3fn]

When I added html { overflow-x: hidden; } body { overflow-x: hidden; } then it worked in chrome

[@DanHoltkamp]

It works on the desktop browse but not the mobile browser. On the mobile I can scroll over to the right and see a blank box with the background color. Still looking for a solution.

[@adityasagar9078]

I click LIKE whenever I hear him make an inside joke in the video.😂

[@jakerajzbartolo739]

Hi for anyone having a hard time on overflow-x: hidden Anyone wondering how to fix it in the media query for the mobile phone, in .nav-links change the "position: absolute" to "position: fixed"

[@javiermercado7664]

thanks a lot, ive been an hour searching for the solution

[@hammadahmed1138]

thanks buddy

[@oliverkuso1931]

MVP

[@angelordonez2959]

are you talking about the navbar messing up when in mobile view? Im trying to make the navbar work properly when in mobile view but it seems to have both top and side navbar. do you have a sample of the code you used?

[@buddhistff2435]

I love your teaching coding and debugging style. You are one of the good teachers I have ever seen as a youtuber Thanks for your kind and helpful video. I'll keep watching your every videos.

[@alexandretrajano8927]

If anyone's still having problems with 27:00: link.style.animation = `navLinkFade 0.5s ease forwards ${index /7}s`; You ACTUALLY need to use 'back-ticks', which are the 'grave-accent' character. You can copy them in here: ` ` Two nice guys down here posted about using the character below the Esc button, but that didn't work for me because of my Brazilian Keyboard, that most likely has a different setup. Thanks for the class Mr. Ed Source: stackoverflow.com/questions/3304014/how-to-interpolate-variables-in-strings-in-javascript-without-concatenation

[@karolina_ste]

Woah, I spend 2h looking for a mistake in my code and then saw your comment, thx a lot! :D

[@luuk2406]

It just doesnt work for me and im sure i got the same excact thing can some one please help

[@krust_]

don't know if you still wan to know but for me the problem was that I linked the javascript in the head part of the html instead of the body.

[@luuk2406]

@@krust_ i had the same problem buts i already fixed it a year ago 🤣❤🙌🙌🙌🤦‍♀️️🤦‍♀️🤦‍♀️🐱‍🏍🐱‍🏍🐱‍🏍🏍🏍🏍♀️

[@timothyroy20111]

Great tutorial! For some reason, the JS did not work for. I checked it over an over it again - can't find the issue. It would be great help if you share your code as well. Thanks for the good work.

[@danieldiaz855]

I had the same issue cause, it says Type error I don't have any way to fix it.

[@absolution8637]

Pls why I'm i having trouble getting the burger transition the list item Whenever I click nothing happens

[@christianlarsen1679]

Put .nav-active inside your @media query

[@absolution8637]

Christian Larsen thanks mate... I did fix it already, kind of tricky when I did.... My browser wasn't recognizing 0 as opacity value so I appended "px" at the end and made some corrections to my js file

[@prshendra]

@@absolution8637 btw, opacity does not use length unit. So the value is between 0-1.

[@raghadalqobali3590]

please can you tell me how did you fix your js file cause I have the same problem!

[@FiveFourThor]

Amazing!! That tip you shared about how to set up the divs in the nav is PRICELESS!!!

[@sugurugeto3911]

dude you've got such a vibe, which i loved it, thank you so much!!

[@PMTFILMS]

Hello! I followed your method and was able to create a good looking navigation bar but what i noticed is that the burger function would not work on my other pages. but the normal navigation bar works.

[@PMTFILMS]

Please help!!!!!!

[@ejvandijk]

Hey Dev Ed, thanks for dropping this video, it's always inspiring to watch these video's and your enthusiasm is contagious. When implementing the code you wrote for adding a togglemenu, there's a ghost menu when I reduce the size of my window to where the burger pops up. It show's the nav-links for a split second and then slides away again. How do you prevent this from occurring?

[@KenHehehe]

I follow every steps you done but it seems I got some problems. sliding bar is working but the nav-links isn't showing up but If I remove the opacity in nav-links li it show up but no animation

[@soniauduma1640]

same thing happens with mine

[@anwarulbashirshuaib5673]

This man is so charismatic! You earned a sub on my first view!

[@betgani]

I quote an excellent message that I read below: 1. "Great personality 2. You're a great teacher 3. best dynamic! From @Danilo Miranda Santana

[@codewithvath7990]

Can you explain me, Why I do inspect on web browser, and go to device tool bars and the body overflow-x: hidden; doesn't work :(

[@fatemehyosefi1018]

me too

[@fredericforclif7953]

no sadly not "const navLinks = document.querySelectorAll('.nav-links li');" give me no links in the sidebar - the function is working fine - all is good except no visible links in the sidebar

[@ckm5528]

i think im having the same issue i cannot see my 'a' links after finishing the JS portion in the video

[@rs95Opbr]

Me too!!

[@Eenfout]

Saw one comment who solved the issue for me. In JS go to the following line: link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`; Put a ` at the end instead of a '

[@aw6674]

one thing I noticed when I was finished with the tutorial the nav bar in mobile mode always appears when resizing the window automatically and then goes to the side. How do you fix that ??

[@prateeksood3183]

Use windows resize event *window.addEventListener('resize',()=>{*code to hide nav*})*

[@aw6674]

not sure how that works since I am a complete javascript beginner. But thnx never the less ill try to figure it out. =)

[@henningsieh]

What is "mobile mode" and what is "resizing the window automatically"? This Dev by Ed does recognise a mobile browser or anything like that. You are describing the exactly correct behaviour of this JavaScript: it flips to a kind of mobile optimized view when screen resolution comes below a certain amount of pixels. Edit --- Sorry, now I got you! You are absolutely right, it took me slightly more time as if Master DevEd has his hands on the code... ✌️

[@aw6674]

@@prateeksood3183 what code would you for {*code to hide nav*}

[@arturocardiel4056]

added these lines of code and seemed to work. Place it under your .burger div{} @media screen and (max-width:100vw){ .burger{ opacity: 0; } } it says if the screen changes to mobile view the burger appears if not it will stay hidden otherwise. Im still a beginner too so excuse me if it sounds confusing

[@raqueliatheimpatientgardne8196]

I am only half way thru and had lost your video on a restart so am now subscribed and you are a very good instructor... I cannot tell you how much time I lost trying to find this exact thing and am so happy I found you. Please do a contact form with the php side, if you haven't already. thanks...

[@ilovemoney3366]

I really appreciate the way you make this Tuto bro, no copy past from fontawesome link. I like it You the best

[@hammavaqttv2273]

kzbin.info/www/bejne/rJmaoJWNhKhmoLs please can you watch this video

[@PoivronProd]

Many thanks for this tut. Really helpful for beginner as I am ! Just a question (as we don't have content in your example, this doesn't occur): if you're in the width mobile view case actually you make the scroll disable in order to keep nav burger menu onscreen and not going away (overflow:hidden). This makes the content unable to be scrolled as well. Do you have a solution to disable scroll ony when menu appears ? Anyway, thanks for those cool tips :) Cheers!

[@ColeCraftAlpha]

Did you ever find a soulution for this? I'm having this exact issue right now!

[@Davidebrocc98]

i found the solution changing the meta data in the html file using this code

[@PoivronProd]

@@Davidebrocc98 gonna try that, thanks !

[@ely8478]

I tried to remove the toggle menu when clicking on a link, but when i try to re-open the menu, the links doesn’t appear. (i tried to re-add the class nav-active but still doesn’t work)

[@zeppo675]

same

[@jdon144]

Apparently everything else works but my @keyframes. It seems the for and to commands are not recognized :(

[@zlibkorn]

same problem here. So annoying to NOT see the links fading in :((

[@jesshall193]

Thanks for the tutorial. I actually really appreciated seeing how you troubleshoot when things don't work as expected. I learned a lot about how I can do that for my own projects through this! :) Great teacher, please keep making videos like these!!!!

[@developedbyed]

Thank you so much!

[@gj8822]

Finally someone with the same thinking process I have. Thanks ED! You awesome bro!

[@imaby.k]

it doesnt work, when we open it in mobile view, through inspect in chrome it show the web view only.....then i changed the media screen size to 1080px then also it wasn't displayed properly....please help

[@scottclemens7966]

copy this into the section of your html doc.

[@AB-bb9vg]

Why can't i see li items? When i fix opacity at 1 is it ok but when i do it with style.animation in javascript it didn't work. Please help

[@banditgal3048]

same thing happened with mine - the burger animation works but not when I try to add in the Li as well

[@maYTeus]

You're prolly using the normal quotes. You have to use the back quote tic marks over on ~ key

[@banditgal3048]

@@maYTeus this is what I had link.style.animation = `NavLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`; is that not right?

[@trikortreat123]

@@banditgal3048 You have to use the ` symbol not the '. This is located right below the tilda or the "~" symbol on your keyboard. Had the same problem but just got it to work!

[@enrikes9877]

@@trikortreat123 Hes using the right symbol though.

[@AlbertEinstein-um3vq]

Hi all Excellent video, thank you a lot. I only have a question / issue, I cannot reverse the opacity of the links from 0 to 1. If I follow your the code, I can not see the links. I'm sure that they are here because if I comment the CSS line ".nav-links li {opacity: 0;}" I can read them... Does somebody maybe have a tip? After looking again my code, it seems that I don't know if it's the opacity of the translateX which does not work... Thank to anybody who can help me :)

[@RickayyB]

navLinks.forEach((link, index) => { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 2}s`; console.log(index / 7); });

[@kierankieran7507]

@@RickayyB thank you ! My eyes were hurting me trying to find my mistake (forgot the "s" after 0.5)

[@mvaldez02]

@@RickayyB Thank You So Much!

[@CanalJFpharma]

@@RickayyB Thank you very much!!!!!!!!!

[@JayTronik1]

After weeks of struggling, I have to thank the people for the cool comments they already made. And miraculously fixed the nav. Now all working even with an animated background as I originally imagined it.

[@luisrocha2762]

bro my bar doesn't open and i dont know why can you help me?

[@JayTronik1]

@@luisrocha2762 the fix is in the comment section below bro. Scroll to about one year ago, where Dev Ed replied to someone with a link. In that link there are some fixed codes, i just copied it from there. I forgot the username, i think it was morpheus101a or something like that. All the best ;)

[@luisrocha2762]

@@JayTronik1 ty mate

[@xxkaribaxx8352]

i know this video have two years but i love u this video is really helpful