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.
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 RUclips, 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 ' ?
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 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
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.
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
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!
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.
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 .
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
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.
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; }
"I actually thought that was too big, that's what she says". You're ridiculously funny😄, I love your content!
4 года назад+4
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!
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
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.
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
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.
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?
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.
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.
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
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.
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
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 ;)
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"
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?
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 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!
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.
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!!
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
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
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 '
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.
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!!!!
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 ??
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... ✌️
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
@@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!
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!
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...
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.
@@alexanderverbeeck6617 you are missing something somewhere. My recommendations, since it's a half hour video you could benefit greatly in watching it again or you can post your codes here and someone can try to help you figure it out
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?
I'm at 23:10. The clear background of the dropdown menu only appears when i change the screen width from large to small and the burger icon shows up. Otherwise, when I click on it, the menu doesn't drop down.
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
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!
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
I laughted so hard when you said that you are stupid while I felt stupid through the whole video :) Thank you so much man! Awesome video, they should make 2 like buttons for you! Make one where you create an image gallery too!!!
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
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 :)
my nav links did not show when i did .nav-active{transform:translateX(0%) } and i clicked on my hamburger nothing happened. th class is .nav_links so why did we just put .nav-active?? but neither worked for me any suggestions
Converting this to a func component React-App, and things are looking quite a bit different. If you're wondering, here's how to achieve through 22:00, In Navigation.js: I added this as an event handler in my Navigation function (before return): function handleSlide(e) { const nav = document.querySelector('.navigationLinks'); e.preventDefault(); nav.classList.toggle('nav-slide-active') console.log('Navigation Slide'); } In the return statement, add this to the burger div: onClick={handleSlide} This will invoke the handleSlide() function when the burger div is clicked. I'll add replies as I get further in the video.
For the animation, I followed the same instructions, but **MAKE SURE** you are using backticks instead of single quotes around the link.style.animation = `` portion. // Animate individual link to enter on Burger Menu eachLink.forEach((link, index) => { console.log(index); if(link.style.animation) { link.style.animation = `` } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 4 + .3}s` } })
Thanks sooo much Dev Ed, a brilliant tutorial, you show the way you work out these problems which is so useful and makes it soo much more fun. :) lovely person on the internet!
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)
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
❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.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.
Time stamps:
1:24 - HTML
2:57 - CSS
19:55 - JavaScript
1. Love your personality
2. You're a great teacher
3. You got a new sub!
I love the fact you take us through your design thought process. debugging and all. interesting stuff
ruclips.net/video/Iau47_Uefho/видео.html -- image sliding animation using html & css
❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.
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 RUclips, 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
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.
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! 🙏🏻
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 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
the fact that he always have a "that's what she said" line, makes it a hundred times better
ruclips.net/video/Iau47_Uefho/видео.html -- image sliding animation using html & css
@@ayanarko8890 wtf random video
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!
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!
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?
Man have you try laughing and typing at the same time, man I'm having so much fun coding. Thank you!!
I'm glad to know that I'm not the only one that keeps forgetting how to remove those odious bullet points
❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.
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 .
❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.
When you made this type of projects then please save them in one playlist. You are great bro
ruclips.net/video/Iau47_Uefho/видео.html -- image sliding animation using html & css
ruclips.net/video/Iau47_Uefho/видео.html -- image sliding animation using html & css
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
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!
ruclips.net/video/Iau47_Uefho/видео.html -- image sliding animation using html & css
ruclips.net/video/JtS6N_z233A/видео.html -- sliding effect
ruclips.net/video/CFAmhyEB1Jw/видео.html -- image animation
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.
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! 🤣
"I actually thought that was too big, that's what she says". You're ridiculously funny😄, I love your content!
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!
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
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.
THANK YOU for making a comprehensive, free tutorial for this :) This was actually better explanation than some of the udemy tutorials I've seen
ruclips.net/video/Iau47_Uefho/видео.html -- image sliding animation using html & css
❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.
Thx for this tutorial, had forgotten all about CSS animations, thx you for restarting my interest for CSS :)
ruclips.net/video/Iau47_Uefho/видео.html -- image sliding animation using html & css
"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
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!!
Love listening to you talk out loud so we can hear your thought process! Turned out really nice! Thank you
That was dope it was pretty good because you explained your thinking behind a lot of what you were coding thank you!
ruclips.net/video/Iau47_Uefho/видео.html -- image sliding animation using html & css
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
please make big tutorial like creating form login, register, and email activating membership. big thank sir.
look at him man, he is loving what he is doing
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.
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
this guy has a great vibe (lowkey crushing on him ;p) btw thnks for such a great video its just what i needed
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
3 years later, your video helped me a loooooot. thank you so much!!!
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.
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.
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
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)
I actually never knew a way to animate properly and the way you've shown is pretty easy to understand so thanks
HEY BRO, I GOT LOST AS SOON AS YOU STARTED DOING JavaScript :D LOL
IT'S BEEN LOTS OF FUN!!
THANK YOU :-)
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/
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.
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 guy is just chilling and making the vid, but he is really good. Loved your teaching
Note - You earned a subscriber
Hands down the most comprehensive tutorial for a responsive nav bar. 5 stars
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 ;)
❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.
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"
thanks a lot, ive been an hour searching for the solution
thanks buddy
MVP
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?
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.
Really loved the tutorial. I used it to create a navbar on my personal website. Everyone thinks the mobile navigation is amazing.
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!
❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.
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!!!!!!
Good stuff. Only had an issue when referring to the class names. 'nav-active' instead of "non-active". Thanks.
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!!
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.
Amazing!! That tip you shared about how to set up the divs in the nav is PRICELESS!!!
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!
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
i think im having the same issue i cannot see my 'a' links after finishing the JS portion in the video
Me too!!
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 '
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.
🇷🇺🇷🇺🇷🇺🇷🇺
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.
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!
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 ??
Use windows resize event
*window.addEventListener('resize',()=>{*code to hide nav*})*
not sure how that works since I am a complete javascript beginner. But thnx never the less ill try to figure it out. =)
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... ✌️
@@prateeksood3183 what code would you for {*code to hide nav*}
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
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
The Links don't appear for me when I hit the hamburger icon, it opens blank. Someone please help!
put it on codepen, I would gladly take a look at it.
@@developedbyed Here it is:
codepen.io/7baa55af-87a8-4c8e-8491-db61f728e598/pen/REyada
left some comments with the fix! codepen.io/lorenaschmidt/pen/OrwozZ?editors=0010
@@developedbyed wow you're awesome! I just notice you're correction. Thank You!
Having the same problem
I learned A LOT! Wow what a great tutorial. I subscribed. Thank you. Looking forward to watching more from you!
I have started my web development journey and was struck how to add burger. This was so helpful.
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
same thing happened with mine - the burger animation works but not when I try to add in the Li as well
You're prolly using the normal quotes. You have to use the back quote tic marks over on ~ key
@@maYTeus this is what I had link.style.animation = `NavLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
is that not right?
@@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!
@@trikortreat123 Hes using the right symbol though.
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 🤣❤🙌🙌🙌🤦♀️️🤦♀️🤦♀️🐱🏍🐱🏍🐱🏍🏍🏍🏍♀️
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
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...
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?
Problem: When I open this on my pc is all working probably, but when I am trying on my phone, then I can scroll out and see the overflow. Pls help!
Same here! Ed help please!
Same problem... don't know what to do... got a deadline pretty soon 😔😔😔
@@alexanderverbeeck6617 did you do overflow-x: hidden
@@tidrel7497 yes i did..
@@alexanderverbeeck6617 you are missing something somewhere. My recommendations, since it's a half hour video you could benefit greatly in watching it again or you can post your codes here and someone can try to help you figure it out
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?
I'm at 23:10. The clear background of the dropdown menu only appears when i change the screen width from large to small and the burger icon shows up. Otherwise, when I click on it, the menu doesn't drop down.
Finally someone with the same thinking process I have. Thanks ED! You awesome bro!
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
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 !
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
copy this into the section of your html doc.
I really appreciate the way you make this Tuto bro, no copy past from fontawesome link. I like it You the best
ruclips.net/video/vh7obWOC3jY/видео.html please can you watch this video
I laughted so hard when you said that you are stupid while I felt stupid through the whole video :) Thank you so much man! Awesome video, they should make 2 like buttons for you! Make one where you create an image gallery too!!!
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 :((
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.
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!!!!!!!!!
dude you've got such a vibe, which i loved it, thank you so much!!
This man is so charismatic! You earned a sub on my first view!
my nav links did not show when i did .nav-active{transform:translateX(0%) } and i clicked on my hamburger nothing happened. th class is .nav_links so why did we just put .nav-active?? but neither worked for me any suggestions
try including the parent like this: nav .nav-active { transform: translateX(0%); }
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.
my js is the same as yours.. but it wont slide out..
Converting this to a func component React-App, and things are looking quite a bit different. If you're wondering, here's how to achieve through 22:00,
In Navigation.js:
I added this as an event handler in my Navigation function (before return):
function handleSlide(e) {
const nav = document.querySelector('.navigationLinks');
e.preventDefault();
nav.classList.toggle('nav-slide-active')
console.log('Navigation Slide');
}
In the return statement, add this to the burger div:
onClick={handleSlide}
This will invoke the handleSlide() function when the burger div is clicked. I'll add replies as I get further in the video.
For the animation, I followed the same instructions, but **MAKE SURE** you are using backticks instead of single quotes around the link.style.animation = `` portion.
// Animate individual link to enter on Burger Menu
eachLink.forEach((link, index) => {
console.log(index);
if(link.style.animation) {
link.style.animation = ``
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 4 + .3}s`
}
})
Thanks sooo much Dev Ed, a brilliant tutorial, you show the way you work out these problems which is so useful and makes it soo much more fun. :) lovely person on the internet!
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)
same