the best video I have ever seen for the responsiveness of the website. in fact this the video which gave me the complete understanding of the responsiveness . thank you so much great work do More
If you guys are having trouble with the toggle not showing, try minimizing your window. If you see the three lines after doing that then congrats you followed well! Now to fix this issue, the solution I found was to adjust the max width from the line that has @media from 992 to a higher number, btw mine worked at 2000px.
@@Marieswaran_17 In your code, add this script: window.addEventListener("DOMContentLoaded",function(){ alert("Window width:" + window.innerWidth"); alert("Window height:" + window.innerHeight); } also, try adding this meta: your code wont work if the meta tag is not added, so take care of that. Edit: This occured to me too when i was learning programming, and happens usually with a lot of programmers. Just make sure you check the syntax again
Hey! Awesome work and thank you very much! I adjusted dropdown menu to suit my project and your tutorial helped a ton. I am having a bit of trouble with toggling an xmark, any other icon for that matter. Xmark apparently isn't included in font awesome 5 free so I tried with other icons but nothing works! Still have the good ol bars so not really an issue.
ooh, it's so cute to see clean html after working with React and Next.js for a long time.. it's like playing on an old 8bit Dendy🥰😍😍😍 there are no functions, states and props here - i love it!
This is amazing, although I would like to make a suggestion, do you think it’s possible you input speech as you code? Just for more clarity and gives you the time to explain certain things, big love and a nice one. 👏🏽
Thank you for the excellent video! By the way I have a question. Is there any specific reason of using , instead of tag? I presumed that would fit semantics better than . I am a beginner , so any informative comments would be highly appreciated! Thank you sir!
There is no reason for the should have a class of 'navbar'. you can also use tag with a class of "navbar". btw using a tag itself for designing can be overwritten by its priority order. since class have higher priority than tagname
I changed few things of font-awesome and it works fine for me , I used this rel link : cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css then for bars use class = "fa fa-bars" , for cross/xmark use class = "fa fa-times" . I hope this will help you☺
Wow such a beautiful and simple follow along tutorial. Keep on bringing quality content, you have our support 💝 Btw which background music did u use in this video??
Can someone share the final index.html and style.css I've trouble with the toggle button, for some reason is not working to me, I want to check where I messed up.
Hello Web Dev Creative, is it possible to have logo on center and links on left and the button on right side in the navbar if this does possible recommend some videos or just me here because I am struck to learn my how to make responsive navbar sorry bothering you. please let me know.
If you followed his tutorial completely, at the java script part, it wouldnt work for me but when I changed the .toggle_button in the script to the mentioned .toggle-button in both cases, it fixed it.
Thank you a lot for this treasure of a video! Really well explained and so easy to follow! How could we expand you JS code so that when someone clicks a link in the mobile navbar, the navbar closes automatically after the link being clicked?
Thanks for your comment and for your interest in my video! To make the background image responsive, I used CSS to set the background position to center and the background size to cover. This allows the image to scale up or down depending on the size of the screen while keeping it centered. I hope that helps! Let me know if you have any other questions.
Youre not following the DRY principle, youre repeating the menu text links, so when you need to update it, you must it do it twice. Also when using the position:absolute, you are using rem and px units.
All source code: patreon.com/webdevcreative
merci
I’ve worked on mine and it’s working
If you need the code I can share with you.
Just reply. Thank you 👍
@@Blacknarrates please share
@@Blacknarrates thank you
@webdevcreative the link is not opening
Thank you so much for this detailed complete video. You explained everything about mobile dropdown responsiveness here. Thanks alot. God bless you.
I've been struggling with creative a functional navbar, thanks alot for this video 😭🙏
The layout looks great but all of the shortcuts I learned from this astound me! Instant Sub!
the best video I have ever seen for the responsiveness of the website. in fact this the video which gave me the complete understanding of the responsiveness . thank you so much great work do More
Great video. Had no voice over but still explained everything flawlessly
Best! I use your videos for learning. Perfect, I understand everything without your explanation/speaking. I learn a lot, thanks to you 😊😊😊😊
This was unbelievably helpful, thanks!
If you guys are having trouble with the toggle not showing, try minimizing your window. If you see the three lines after doing that then congrats you followed well! Now to fix this issue, the solution I found was to adjust the max width from the line that has @media from 992 to a higher number, btw mine worked at 2000px.
Mine Worked When I Removed The 'Overflow:Hidden' Attribute
@@johnexplorations272 mine also work but when I reload it automatically open
I followed right and put the right syntax but My media query does not working what would I do
@@Marieswaran_17 In your code, add this script:
window.addEventListener("DOMContentLoaded",function(){
alert("Window width:" + window.innerWidth");
alert("Window height:" + window.innerHeight);
}
also, try adding this meta:
your code wont work if the meta tag is not added, so take care of that.
Edit: This occured to me too when i was learning programming, and happens usually with a lot of programmers. Just make sure you check the syntax again
It worked. ty
I appreciate the tutorial (even if it's not voiced over)
I incorporated it into my little React project
Thank you, your video helped me so much to finish my work. I'm so grateful.
It was a nice and clean video. Even without a voiceover, you made us understand everything. Thank you for creating this clean and great video.
I have a question, is it necessary to add a bg-color if bg-image covers the whole screen? Why did he did like that?
Hey! Awesome work and thank you very much! I adjusted dropdown menu to suit my project and your tutorial helped a ton. I am having a bit of trouble with toggling an xmark, any other icon for that matter. Xmark apparently isn't included in font awesome 5 free so I tried with other icons but nothing works! Still have the good ol bars so not really an issue.
ooh, it's so cute to see clean html after working with React and Next.js for a long time.. it's like playing on an old 8bit Dendy🥰😍😍😍 there are no functions, states and props here - i love it!
Thank you for the helpful lesson you shared, my dear friend. Wishing you success!
Fabulous tutorial bro❤️❤️
I love it very much ❣️
Awesome video it really helped me 🚀👌
pocos minutos hiciste eso. eres un crack. nuevo suscriptor
This was great! Thank you!
This is a great saver...Thank you soo much.
Thank you. It was so simple to understand.
awesome! 😁😁
brilliant videos...Thank you so much❤ Subscribed!
This is amazing, although I would like to make a suggestion, do you think it’s possible you input speech as you code? Just for more clarity and gives you the time to explain certain things, big love and a nice one. 👏🏽
Thank you for the excellent video! By the way I have a question. Is there any specific reason of using , instead of tag? I presumed that would fit semantics better than . I am a beginner , so any informative comments would be highly appreciated! Thank you sir!
There is no reason for the should have a class of 'navbar'. you can also use tag with a class of "navbar". btw using a tag itself for designing can be overwritten by its priority order. since class have higher priority than tagname
Good stuff, thanks a bunch!
Thank you for creating this great video. ❣
Help me develop by subscribing so that I can be more enthusiastic about creating programming content
thanks. this video was so useful for me❤
bro my toggle navbar doesnt work can u help me please?
propably you put 'quarySelector' instead of 'querySelector'
toggle is workung for me
My is not working
mine wasnt too but then i realised i had typed "classlist" with a lowercased L instead of "classList" .
subtle mistake.
@@souhaila1202 lol
i love the design
Great tutorial, thanks!
Such a simple design to follow along with, thanks a bunch!
this tutorial is really helpful 😍Thanks🌼
You're welcome!
Thank you so much your video helped me a lot :)
So the phone size part wasn't working and after about an hour of going over and over the code, it was just a missing comma...
Thank you for sharing this video.
good one
wowwwwww great
Good job. Nice design
Great Video
well done man!
I can't get my navbar script to work. up to 11:37 I can't open up the menu.
how u fix that?
@@pablobartolomegallardo6566 did you get it?
@@marcellszucs2225 Yeah!
@@pablobartolomegallardo6566 How?? Pls Tell me Im struggling
@@marcellszucs2225 u fix that?
ive wrote the exact same thing as you but when i copy the bar in to the code it doesnt show up? youre relly great and i would love for this to work!
same thing happened to me, did u find a fix?
I changed few things of font-awesome and it works fine for me ,
I used this rel link : cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
then for bars use class = "fa fa-bars" ,
for cross/xmark use class = "fa fa-times" .
I hope this will help you☺
awesome 🥰
The Background Music Is So Immersive
The background music is so annoying
cann i add my self the js code?
Marvelous
Wow such a beautiful and simple follow along tutorial. Keep on bringing quality content, you have our support 💝
Btw which background music did u use in this video??
What does the question mark and colon in 12:07 mean?
It's ternary opretor
Hello thanks for this but how to you do that thing in time 2:09 when you fix the long font link.
Lines of code are just being formatted on hitting save. it is a setting in VSCode. (Search for Format On Save option in VSCode)
Can someone share the final index.html and style.css I've trouble with the toggle button, for some reason is not working to me, I want to check where I messed up.
Thanks ❤ my friend
Thz bro this is so easy n very nice ilysm
So satisfaction 😊
Hey! Great video as always 😁 I was just wondering, what web browser do you use?
Hello Web Dev Creative,
is it possible to have logo on center and links on left and the button on right side in the navbar if this does possible recommend some videos or just me here because I am struck to learn my how to make responsive navbar sorry bothering you. please let me know.
6:55 missing the `s` at the end of 0.2 here for the transition to work. Great video though :)
My bars are not showing, I've reduced the size of the screen, increased max width still not showing help!!
awesome
intenté hacerlo para una página mía pero no quedó igual
Thank you so much🙏
Hey my dropdown menu is not opening when clicking the toggle button. Can anyone help me out.
instead using .onClick in script function, try this function:
toggleBtn.addEventListener('click', () => {
dropDownMenu.classList.toggle('open');
}
mine too, did you get it?
If you followed his tutorial completely, at the java script part, it wouldnt work for me but when I changed the .toggle_button in the script to the mentioned .toggle-button in both cases, it fixed it.
@@marcellszucs2225 yis
@@sekuchu this saves me! thank you so much!
Actually it's beautiful because it has a pretty picture
Bravo nice job
Thanks man!
how close navbar if widow click?
Thank you a lot for this treasure of a video! Really well explained and so easy to follow!
How could we expand you JS code so that when someone clicks a link in the mobile navbar, the navbar closes automatically after the link being clicked?
cool video)
for me the javascript doesn't work, the menu doesn't appear when i click
When I reduce the screen my bars disapear, I dont know why
Bro, what is your theme extension?
How you resize the background image? how it is responsive?
Thanks for your comment and for your interest in my video! To make the background image responsive, I used CSS to set the background position to center and the background size to cover. This allows the image to scale up or down depending on the size of the screen while keeping it centered. I hope that helps! Let me know if you have any other questions.
NEW Responsive Navbar NO JS! - th-cam.com/video/JEulHItO3UI/w-d-xo.html
where you learnt html css js ?
Why create a div classed as navbar when you cab use navbar tag? Can you please explain?
a class has precedence over a tagname
Idk whats wrong i copied all the code but Get started in the dropdown wont show pls help
very helpfull
Glad to hear that
Realy bro its helpfully in my project i just include this instruction thanks❤️
thanks mine worked perfect
Thank you very much !!
Good❤
Thanks!
I did all things as shown but the java script phase doesn't work😭😭😭😭
help guys! when i click the three bars the dropdown doesnt show but the three bars changed into x.
I get that as well did you ever find a fix? When I manually add open to the dropdown menu it appears
very helpful thanks
Thanks❤
thank u ❤
Thank you brother
this is great work although my drop down is not working even after using your code from git hub..kindly assist
Hi, did you find the solution?
شكرا Thanks it was helpful
Youre not following the DRY principle, youre repeating the menu text links, so when you need to update it, you must it do it twice. Also when using the position:absolute, you are using rem and px units.
Thank you so much
how can i run there code?
thank you!!
Thanks so much
JS not working in Firefox based on screen code shown here.
everything is okay but when i go to click bar it isn't opening why?
Thank you.
inserting background image not working on me its blurred
When I'm adding about us section after all this code so why my about us pic and text go up