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
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.
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
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.
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.
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.
I don't normally reply here on UA-cam, 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.
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 ' ?
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
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
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; }
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!
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.
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 .
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.
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.
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 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.
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!
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 ;)
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.
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 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.
@@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!
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.
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
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
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.
@@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
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
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
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!
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?
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?
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.
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 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 ;)
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();
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.
@@makingzebraop I found this bro. .nav-active class is from classList.toggle("nav-active"). you can check out this--> www.w3schools.com/jsref/prop_element_classlist.asp
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.
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!!
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.
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!
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.
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.
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!!!!
Hello Ed, really a nice tutorial! I followed all your instruction till minute 22:14 ... but, after i finish the compilation of the file "app.js" and then i click on menu... it doesn't work... I cheched everything.. but im stucked!... and i cant' go ahed with the tutorial. Any hint? Thumb-up and subscribed. Greetings from Italy.
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 :)
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...
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
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
The fact that he codes with one leg up in the chair is amazing
I do that as well
I do that as well
I do that as well
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.
Thats what i was thinking 💀😂😂😂
1. "Great personality
2. You're a great teacher
3. You got a new sub!"
4. best dynamic!
same here... since a week or so 😃 very cool dude with a massive ... ehm, coding speed, she said!! 🤓
@@henningsieh that's what she said ;)
copied
@@user-fq9ct5iu3c ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻
Same
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
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.
I'm glad to know that I'm not the only one that keeps forgetting how to remove those odious bullet points
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.
I love the fact you take us through your design thought process. debugging and all. interesting stuff
ua-cam.com/video/Iau47_Uefho/v-deo.html -- image sliding animation using html & css
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.
1. Love your personality
2. You're a great teacher
3. You got a new sub!
the fact that he always have a "that's what she said" line, makes it a hundred times better
ua-cam.com/video/Iau47_Uefho/v-deo.html -- image sliding animation using html & css
@@ayanarko8890 wtf random video
I think I learned more in this 35-minute video than I did from hours and hours of tutorials online.
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
thanks.....stucked at it for too long..xd
its called the legendary `BACKTICKS`.
we usually call that ' tilde ' key
dude, thank you so much!!
thanks! I didn't notice at all !!
Don't apologise for your videos being long. You are amazing! 🙏🏻
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.
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
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.
my code still not working, the opacity still 0, what should i do?
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.
OMG thax
I don't normally reply here on UA-cam, 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.
You just saved me! Thanks
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 ' ?
@@martinperens I think it takes ' ' as a string and ` ` as a script
When you made this type of projects then please save them in one playlist. You are great bro
ua-cam.com/video/Iau47_Uefho/v-deo.html -- image sliding animation using html & css
ua-cam.com/video/Iau47_Uefho/v-deo.html -- image sliding animation using html & css
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
You sir are a legend!
Thanks :)
Man, thanks.
Achmad, thanks a lot! I knew I would find the answer here. You are the best!
I LOVE YOU!
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
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;
}
thank you so much it worked for me
About 30 minutes wasted before i thought to search 'overflow-x' in the comments! 🤣
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!
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.
Time stamps:
1:24 - HTML
2:57 - CSS
19:55 - JavaScript
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 .
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.
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.
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.
However, he does sound a bit drunk and it's a bit funny.
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
me too i have the 2nd problem you said
I have the same problem, I can see the menu closing.
@@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;
@@var1541 oh ok gonna try it
@@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.
THANK YOU for making a comprehensive, free tutorial for this :) This was actually better explanation than some of the udemy tutorials I've seen
ua-cam.com/video/Iau47_Uefho/v-deo.html -- image sliding animation using html & css
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.
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!
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!
ua-cam.com/video/Iau47_Uefho/v-deo.html -- image sliding animation using html & css
ua-cam.com/video/JtS6N_z233A/v-deo.html -- sliding effect
ua-cam.com/video/CFAmhyEB1Jw/v-deo.html -- image animation
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!!
"its too big, thats what she said" - that made me laugh XD
I reversed the video to double check I wasnt tripping... that made my day! Lmao💜
great jokes for 10 year olds
@@ahmedrobi6507 hahahaha eDgY
@@ahmedrobi6507 you doggggggggggggg shit
Sir please find me the nav-link class he declared
Thx for this tutorial, had forgotten all about CSS animations, thx you for restarting my interest for CSS :)
ua-cam.com/video/Iau47_Uefho/v-deo.html -- image sliding animation using html & css
"I actually thought that was too big, that's what she says". You're ridiculously funny😄, I love your content!
Amazing!! That tip you shared about how to set up the divs in the nav is PRICELESS!!!
I actually never knew a way to animate properly and the way you've shown is pretty easy to understand so thanks
please make big tutorial like creating form login, register, and email activating membership. big thank sir.
this guy has a great vibe (lowkey crushing on him ;p) btw thnks for such a great video its just what i needed
That was dope it was pretty good because you explained your thinking behind a lot of what you were coding thank you!
ua-cam.com/video/Iau47_Uefho/v-deo.html -- image sliding animation using html & css
Man have you try laughing and typing at the same time, man I'm having so much fun coding. Thank you!!
Love listening to you talk out loud so we can hear your thought process! Turned out really nice! Thank you
so yall telling me you didn't notice the "mynigga" file under recent @1:19 lmaoooooo
y'all*
@@angel-tylebron6111 LOOOL i just saw it
yoooo hahaha , but have to say this video is great content though
lol As a black guy, I approve #mynigga
LMAO.
🇷🇺🇷🇺🇷🇺🇷🇺
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 ;)
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.
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.
3 years later, your video helped me a loooooot. thank you so much!!!
I have started my web development journey and was struck how to add burger. This was so helpful.
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.
im having that problem, how can i solve it?
Thanks :)
@@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.
@@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!
@@live7katie No probelm :) glad it helped
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.
Where can i get the codes because i followed the video but am not getting the view and output he gets.
tnx brooo
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
This kind of works but then the transition is taken away when you close it. Anyone have a fix for this?
css-tricks.com/stop-animations-during-window-resizing/
Really loved the tutorial. I used it to create a navbar on my personal website. Everyone thinks the mobile navigation is amazing.
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
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.
Very true! I posted a response in the comments but it probably got lost. Thank you!
@@developedbyed Can you please tell me which visual studio code theme do you use?
But then the animation doesn't appear when closing the nav
Hi @desequilibradoo may I please know where he puts the .nav-active class? It's not shown in the video
@@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
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
thank you
@shadowtecc20 Absolutely work. Please watching video carefully.
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
Thanks this worked great for me
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.
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.
I learned A LOT! Wow what a great tutorial. I subscribed. Thank you. Looking forward to watching more from you!
Great video! I couldn't get "overflow-x: hidden" to work. BUT. Change "position: absolute" to "fixed" in .nav-links. Solves the problem.
Thank you for that hint! Solved it for me as well :)
@@cankarkadev9281 Glad I could help :)
you are a hero. struggled for hours with that thing
Dev Ed thanks bro, the best turtorial ever👌👌!!!!
but it would be far better if you share the code files with us please .
Good stuff. Only had an issue when referring to the class names. 'nav-active' instead of "non-active". Thanks.
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!
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.
look at him man, he is loving what he is doing
I click LIKE whenever I hear him make an inside joke in the video.😂
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?
Pierce Russon have it too...
@@mary0180 i had the same problem but i just removed the dot before the nav-active class - nav.classList.toggle('nav-active');
Eugene Paul Cabauatan thanks, i‘ve added .nav-links.nav-active { transform: translateX(0%);} at the end and now it shows
@@mary0180 where you add?
Luis Rocha before .nav-active
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?
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.
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.
bro my bar doesn't open and i dont know why can you help me?
@@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 ;)
@@JayTronik1 ty mate
Amazing video! thank you for the help, keep up the good work :)
For those who are struggling with body { overflow-x: hidden; } still scrolling on safari, try changing it to only overflow: hidden.
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();
@@AwesomeComps23 same, can't figure out why
your videos are awesome, I have a question, why overflowX doesn't work on mobile? thank's for all your videos you rock man ....
try adding this meta tag
@@jashmorekar jajajajaja amigo, varias semanas buscando esa solución. muchas gracias. Thanks a lot. Greetings from Mexico.
Hands down the most comprehensive tutorial for a responsive nav bar. 5 stars
this guy is just chilling and making the vid, but he is really good. Loved your teaching
Note - You earned a subscriber
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.
I had the same issue cause, it says Type error I don't have any way to fix it.
Very useful!!! Thanks for making this tutorial. By the way, where did the "nav-active" class came from?
Man I stuck there help me
@@alfuad112 no bro try another tutorial
@@makingzebraop I found this bro. .nav-active class is from classList.toggle("nav-active"). you can check out this--> www.w3schools.com/jsref/prop_element_classlist.asp
Feel free to leave any questions and suggestions :)
can u maybe zoom in on the code next time?
for sure!
Dev Ed Can you please share your code to play with? Big thanks. :)
can you show me how to create dinamic page website thanks dev. :D
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)
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.
dude you've got such a vibe, which i loved it, thank you so much!!
Thanks a lot! *How to make the menu closing when i click or tap the outside of menu?*
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!!
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.
Please help!!!!!!
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!
Did you ever find a soulution for this? I'm having this exact issue right now!
i found the solution changing the meta data in the html file
using this code
@@Davidebrocc98 gonna try that, thanks !
HEY BRO, I GOT LOST AS SOON AS YOU STARTED DOING JavaScript :D LOL
IT'S BEEN LOTS OF FUN!!
THANK YOU :-)
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.
overflow-x: hidden not working on Chrome, do you have any idea how to fix this?
html, body {
overflow-x: hidden;
}
same.
it tried html,body and that hasn't worked either
Same problem, does anyone have a solution to fix this?
When I added
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
then it worked in chrome
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.
my js is the same as yours.. but it wont slide out..
I guess I'm not the only one thinking ''This is so much coding for just a nav bar"
Bootstrap for the win!
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!!!!
Thank you so much!
I really appreciate the way you make this Tuto bro, no copy past from fontawesome link. I like it You the best
ua-cam.com/video/vh7obWOC3jY/v-deo.html please can you watch this video
"That's what she said" 😂😂😂
ikr lol 😂
Hello Ed, really a nice tutorial!
I followed all your instruction till minute 22:14 ... but, after i finish the compilation of the file "app.js" and then i click on menu... it doesn't work... I cheched everything.. but im stucked!... and i cant' go ahed with the tutorial. Any hint?
Thumb-up and subscribed.
Greetings from Italy.
Same for me :C
i have an issue that my text doesn't wanna appear..... same for you? when i hold mouse over it changes so its there but doesn't wanna show
Me tooo!! HELP!
@@Daaboo did you find a solution?
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 :)
navLinks.forEach((link, index) => {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 2}s`;
console.log(index / 7);
});
@@RickayyB thank you ! My eyes were hurting me trying to find my mistake (forgot the "s" after 0.5)
@@RickayyB Thank You So Much!
@@RickayyB Thank you very much!!!!!!!!!
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...
Solid start to a great page! Thanks for posting this Ed. Probably going to use this Navigation bar for some small businesses in my area.
Pls why I'm i having trouble getting the burger transition the list item
Whenever I click nothing happens
Put .nav-active inside your @media query
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
@@absolution8637 btw, opacity does not use length unit. So the value is between 0-1.
please can you tell me how did you fix your js file cause I have the same problem!
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
same thing happens with mine
It just doesnt work for me and im sure i got the same excact thing can some one please help
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.
@@krust_ i had the same problem buts i already fixed it a year ago 🤣❤🙌🙌🙌🤦♀️️🤦♀️🤦♀️🐱🏍🐱🏍🐱🏍🏍🏍🏍♀️
i know this video have two years but i love u this video is really helpful
Finally someone with the same thinking process I have. Thanks ED! You awesome bro!
Apparently everything else works but my @keyframes. It seems the for and to commands are not recognized :(
same problem here. So annoying to NOT see the links fading in :((
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 :(
me too
My links don't want to appear. :(
same problem here, my links don't change from opacity 0 to 1.
great video. I'm new to programming but your video is one of the best so far. in simplicity really helps.
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