Responsive Navigation Bar with mobile menu Using HTML & CSS

[@DevTeacher]

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 !

[@JsAcademyOfficial]

Thanks for the kind words!

[@donjoeker8301]

Is there a disadvantage to using a class for everything?

[@itsyoboiarroi]

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

[@JsAcademyOfficial]

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 🙂

[@liorshish8818]

thank you very very much I was searching for hours for an easy to understand responsive nav bar.

[@KaiBuskirk]

wow! great job!! Love it New Subscriber!

[@hamidr_nazari]

awesome!!!!! Thank you as much as whole galaxy :)

[@eightelms]

This developer is a good teacher. He explain things in a way people will understand. 👍5🌟⭐⭐⭐⭐

[@fundybanjos]

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.

[@JsAcademyOfficial]

Sounds amazing, keep up the good work

[@fundybanjos]

@@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.

[@KaiBuskirk]

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!

[@JsAcademyOfficial]

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 :)

[@KaiBuskirk]

@@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

[@sodiyaraymond274]

Thanks Boss 👍

[@2GFactFinder]

Beautiful.

[@lifelessionsbylordkrishna]

Thanks for teaching ❤❤❤❤

[@shaimastr]

thank you so much you helped me a lot !

[@DumbleCash-]

What program are you using in The beginning of The video to preview your website with different widths?

[@russomario]

Great video!

[@Gamerz.280]

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.

[@RRTrader_512]

Awesome brother 🙏🙏🙏 Love from india 🇮🇳

[@JsAcademyOfficial]

Thanks for the kind words! Love from hungary

[@RRTrader_512]

@@JsAcademyOfficial Keep it up Design different-different beutiful webpage ..🙏

[@tothemaxguy]

Hi ! Nice tutorial. I have a question though. Where is the " .open " class?

[@amyo]

I had the same question but figured it out, he used classList in index.js to add the .open class to the menu element

[@Shivamgupta.webdeveloper]

Aapne kaha se or konsa course Kiya hai

[@dotterel]

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.

[@iqrashaikh7576]

Thanks bro🙂

[@imagotchi_]

Thank you for the helpful content. Do you have a version that includes a dropdown menu option?

[@mspencer3674]

this looks amazing! Educational and a fun thing to try as always sir.

[@JsAcademyOfficial]

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!

[@mspencer3674]

@@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!

[@crosbycofod5052]

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!

[@amarmohammed5644]

He made it by styling the three divs with the classes of bar1, bar2 and bar3. Shout me if you need help

[@rahatnadeem3027]

The query to hide desktop nav is not working for me. Please help.

[@radone5140]

when i press on the icon the mobile menu doesn't come out, i thought i missed something but i copied your code and still the same problem

[@andrerouiller2667]

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é

[@NoobD3v]

how do i make it so that is is visible on every page without having to copy the whole code?

[@gigaChad3505]

For some reason the hamburger icon are 3 square block, what did i miss??

[@BerserkerChaman]

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.

[@JsAcademyOfficial]

You’re welcome :) I’m glad you found it useful :)

[@MohamedMaarof]

Thanks

[@deyoallenzo7946]

Amazing in the whole of KZbin same tutorials without anyone really using in a min width to start media query is this how developers actually think???

[@utkarshranjan334]

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.😍

[@JsAcademyOfficial]

Feel free to use it 😊

[@eightelms]

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.

[@mutiaraichsan5061]

do you parallax combine reponive bar video ?

[@JsAcademyOfficial]

You can combine those for sure :)

[@mitko746]

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

[@JsAcademyOfficial]

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

[@mitko746]

@@JsAcademyOfficial Yeah, found the fix, right after writing the comment, haha. But thanks for the immediate response from your end!

[@JsAcademyOfficial]

No worries buddy!

[@allex5723]

@@mitko746 how u fixed it? please tell me if u see this message

[@mitko746]

@@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

[@originasmr]

Hi, My js code is not working, it is doing nothing ??

[@JsAcademyOfficial]

Make sure you included the js file properly. You can refer back to my example code that you can find in the description

[@originasmr]

@@JsAcademyOfficial it worked , thankyou so much

[@viliusCa]

doesn't work for me..

[@arzenrathor]

sir can you teach me full stack devlopment

[@mostafa1845]

Came here just to check if im doing it right :D

[@Smurfis]

This hierarchy doesn't allow the user to use the body anymore that is something you have to be aware of.

[@vishvas3397]

dont waste your time to watch this video... just run source code, even you didn't get output...

[@doller6584]

it didnt work thank you

[@JsAcademyOfficial]

It definetely should work. Please check the source code in thedescription