Responsive Navbar with HTML, CSS and JavaScript
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Learn how to build a responsive navigation bar, starting from scratch, using HTML, CSS and a bit of Vanilla JavaScript.
Code for this Project:
codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Smooth Scroll with CSS: • Smooth Scroll with CSS
Smooth Scroll with JavaScript: • Smooth Scroll with Jav...
Font Awesome 5 Icons: • Font Awesome 5 Icons
Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Music provided by NoCopyrightSounds.
Track: Defqwop - Awakening [NCS Release]
Watch: • Defqwop - Awakening | ...
Free Download / Stream: ncs.io/AwakeningYO
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Helpful video for navbar responsive, link workin, pages display, thanks sir.
😍😍😍🌹🌹🌹💞💞💞👍👌🙏
🙏❤❤🙂
Man this is awesome! THANKS
You did it again! :) Excellent big thanks!
Very nice!
This is a JEWEL of a tutorial on horizontal responsive navbar with mobile menu -- and with broader browser compatibility than those based on flexbox & css grid. Would be great to see you extend this tutorial to the case where the navbar, at desktop viewport, is limited to max-width of say 1170px and centered horizontally. Another great feature would be to put a topbar (above the navbar) with say phone & email floated left and then social icons floated to right. Last suggestion would be to add scroll to sticky, after scrolling the height of topbar. Thank you for this EXCELLENT TUTORIAL and making the code available.
Thanks for the nice words man! 🙂 Although I may have to remake the tutorial at some point using flexbox instead of float...browser support has gone a long way since I've uploaded this video (for flexbox it is currently at around 98%, which is good enough for me 🙂). Well, if for example you want to limit the navbar content to 1170px and center it, all you have to do is to include it within a container...e.g.:
HTML
...
CSS
.navbar-content-container {
max-width: 1170px;
margin: auto;
}
A bit more effort is required for the other features, but really nice suggestions, thank you!! 👍🙂
Thanks for the explaination!
My pleasure! Very glad you liked it 💙
Thank you so much
Wow this is exactly what I was looking for thank you.
Thanks man! Glad you found it useful. Btw I like what you are doing with your channel. Keep it up!!
Great content ! thank you ever so much for sharing !! It`s invaluable help for someone who`s learning!!
Very very glad to hear that 🙂 Pleasure is absolutely, totally mine!! 🙂
niiiiice man, thank you !
Amazing! Glad you liked it 🙂
your codes are very beautiful and maintainable..
Thank you Самады my man! Enjoy the journey :)
nice ...
Dude you should have a tv show!
Heheh 😄 wrongdogg my man, I really think I would be the wrong dogg for this job 😉😂
Great content, thanks Coding Journey.
I'm getting a syntax warning on js line 12 - "navbarLinks.forEach(elem => elem.addEventListener("click", navbarLinkClick));", probably being over cautious; can you spot anything?
Thanks & Regards.
Glad you liked it! Line looks correct and by the way you can find a link to this project in the description. Only problem could be if you are using a browser which does not support fat arrow functions, such as Internet Explorer. In this case you could replace this line of code with the following:
for(let i=0; i
Thanks @@CodingJourney , yes I copied from Codepen as a last resort; the error still appeared in Adobe Dreamweaver. It's not showing any problems whatsoever in the browser, it was just a code hinting problem.
I thought I'd query it as google is very strict with js. Any errors in the code, render fine in the browser but would cause the google bot to disregard anything on that page below the jumped out code I think.
Thanks again for the tutorial.
after i upload this code on same code on server , doesn't open mobile view on mobile its still open Desktop view
Hey man! Obviously I can't debug without seeing your code, but given that you used the exact same code, maybe you forgot to add the following tag for responsiveness (in the ):
All the best, keep it up!!
I really believe that you are one of the best teacher out here, but can you please let me know why I keep having the Uncaught ....SyntaxError: Identifier 'navbarToggler' has already been declared.... for ( const navbarToggler = document.querySelector(".navbar-toggler");
) ... please help here I can not use the button even though I coped exactly every step
Hey, thank you for the nice words 🙂 Well, it is always very hard, if not impossible, to debug without looking at the code, but the error you are getting suggests that you are redeclaring the "navbarToggler" variable. Is there some other place in your code where you are declaring it (const navbarToggler = ...)? You can find a link in the description to this project, so that you can compare with your code! All the best, keep coding!! 😉
@@CodingJourney thank you so much for the response, I will try, but when I changed the cpnst to var it worked.
@@CodingJourney you know what I figured it out, it is because I linked the external JS file twice in the HTML link , yaaaaaaaaay
Excellent!! Debugging is inevitable, if something works fine from the first time, I feel kind of worried 🙂 Keep up the good work!!
Yeap, var allows you to do that...but it is not advised 😉
Hey
Hiiiiii 🙂