Responsive Navigation Bar with mobile menu Using HTML & CSS
HTML-код
- Опубликовано: 6 июл 2024
- In this video, I show you how to create a responsive navigation bar with mobile menu using HTML, CSS, and a little bit of javascript. This navbar will work on mobile, tablet, and desktop view sizes. I also included a cool micro animation with the hamburger menu to make the navigation bar more interesting and interactive.
Source code: github.com/javascriptacademy-...
Interactive playground: codesandbox.io/s/agitated-tu-...
Timestamps:
00:00 Intro
00:20 Desktop HTML
01:50 Desktop CSS
04:36 Mobile HTML
05:15 Mobile CSS
08:18 A little javascript
Where you can find me?
🔗 Links:
* 🍺 Support free education and buy me a beer: ko-fi.com/adamnagy
* 💬 Discord: / discord
* 📧 Newsletter: www.getrevue.co/profile/dev_a...
* ✍️ Blog: dev.to/javascriptacademy
* 🐦 Twitter: / dev_adamnagy
* 📷 Instagram: / javascriptacademy
#navbar #responsive #html #css
Finally a developer who understands the difference between ID and CLASS and who don’t use only class to everything. Keep up the good work !
Thanks for the kind words!
Is there a disadvantage to using a class for everything?
you're the best person i have met so far, this tutorial is super amazing, anyone new watching this vid i recommend to add transition to the ul li, it will look smooth,
for real this is the only tutorial worked for me so far, thanks for the work, you're really awesome
Thanks for the kind words dude! 😊
Yeah, transitions will make this ui super cool. I just wanted to kepp this tutorial as simple as I could 🙂
thank you very very much I was searching for hours for an easy to understand responsive nav bar.
Thank you for the helpful content. Do you have a version that includes a dropdown menu option?
Hey Adam, I appreciate the hard-work you put into this video, it's perfect! Quick question, what would I need to do to disable scroll when the menu is open? Regards, Jamie.
This developer is a good teacher. He explain things in a way people will understand.
👍5🌟⭐⭐⭐⭐
wow! great job!! Love it New Subscriber!
This really helped me out and taught me a lot, thank you! I'm doing the Odin Project and will eventually get to this stuff, but I needed to do this for a friends portfolio site now.
Sounds amazing, keep up the good work
@@JsAcademyOfficial thanks, I was able to use the same principle to turn a 3 column grid into a one column grid with media query as well.
What program are you using in The beginning of The video to preview your website with different widths?
Could someone please help me, I'm using the same code, but I'm trying to center the product Home and about, but I'm not sure how to do it.
thank you so much you helped me a lot !
awesome!!!!! Thank you as much as whole galaxy :)
Great video!
Thanks for teaching ❤❤❤❤
Beautiful.
Hi Adam, first of all thank you for your video. I've tried to do the same as you but when I run mobile version the menu disappears (neither the hamburger menu image appears). I have exactly the same code as you, do you know how to fix it?
Regards, André
Thanks bro🙂
how do i make it so that is is visible on every page without having to copy the whole code?
this looks amazing!
Educational and a fun thing to try as always sir.
You’re welcome :) Give it a try this weekend :) Also there is an online playground link in the description where you can play around in the code. Happy hacking!
@@JsAcademyOfficial that’s great!
I’ll try it tomorrow as i’m heading to a wedding this afternoon.
Gotta say, your content is amazing!
Keep it up!
The query to hide desktop nav is not working for me. Please help.
Did you happen to do follow up videos for footer , content and pages… I was looking but did not find.. thank you for such great teaching will look into more as I learn Danke!
Hi!
Unfortunately not yet, because this year was really busy for me but I plan to continue content creation at the end of this year :)
@@JsAcademyOfficial super! Thank you….
I’m new finally after years of trying to follow and learn…
Marriage Work Business Kids all get in the way of personal growth…fast forward 30 years later… I’m on the lookout for people that can teach an old dog a new trick! Lol….
You got the Header thing nailed
And explained it in a manor that helped me understand… building while doing… watching it change live helps ! Thank you ! looking forward to my new subscriber status! Cheers! Kai
Are you creating the hamburger icon in this with the bars? I cannot get mine to show up or did you import an icon? Thanks!
He made it by styling the three divs with the classes of bar1, bar2 and bar3. Shout me if you need help
Thanks
Hi ! Nice tutorial. I have a question though. Where is the " .open " class?
I had the same question but figured it out, he used classList in index.js to add the .open class to the menu element
Hello! i am learning css and i was wondering wich one will the best way to make a nav bar and after a long research and tests u win by far using this method with flexbox i.thank you for the dedication and high quality content.
You’re welcome :) I’m glad you found it useful :)
For some reason the hamburger icon are 3 square block, what did i miss??
Awesome brother 🙏🙏🙏
Love from india 🇮🇳
Thanks for the kind words!
Love from hungary
@@JsAcademyOfficial
Keep it up
Design different-different beutiful webpage ..🙏
Brother very ver nice.
I want to use it in my website, so can i use it freely or i have to take some license.
I really liked it.😍
Feel free to use it 😊
Aapne kaha se or konsa course Kiya hai
do you parallax combine reponive bar video ?
You can combine those for sure :)
sir can you teach me full stack devlopment
Amazing in the whole of RUclips same tutorials without anyone really using in a min width to start media query is this how developers actually think???
Let me ask you please. I have a one page portfolio website that has links to various part like header, profile and contact sections. All these sections are id. everything works well on desktop screen, but when I click on any menu item link when the mobile hamburger menu is clocked open, the link will appear, but the menu bar will not disappear. Please 🙏 help me out. I used JavaScript to trigger the open and close of the menu bar.
I've had an issue where if I try to add any content to the page, the mobile-bar disappears behind it. How could I fix it
Hello! 👋
From ehat you wrote I think that you need to add a z index to the mobile menu:
developer.mozilla.org/en-US/docs/Web/CSS/z-index
@@JsAcademyOfficial Yeah, found the fix, right after writing the comment, haha. But thanks for the immediate response from your end!
No worries buddy!
@@mitko746 how u fixed it? please tell me if u see this message
@@allex5723 just use what @JavaScript Academy told me already, use z-index: 1; for an example and anything in front of the mobile menu could be z-index: 0; if it's still not working
Came here just to check if im doing it right :D
Hi, My js code is not working, it is doing nothing ??
Make sure you included the js file properly. You can refer back to my example code that you can find in the description
@@JsAcademyOfficial it worked , thankyou so much
doesn't work for me..
This hierarchy doesn't allow the user to use the body anymore that is something you have to be aware of.
it didnt work thank you
It definetely should work. Please check the source code in thedescription
dont waste your time to watch this video... just run source code, even you didn't get output...