Responsive Web Design Tutorial #9 – Making a Mobile Drop-down Menu

Hi.. this is Gunaseelan from india.. can you give link of burger.png file for mobile navigation Button. Its very helpful to me. Thank you.

Amazing. I want to learn this.

YOU have absolutely no idea how happy am I. I was doing this my whole day searching it on W3S, StackOverflow…nothing. I was searching for the burger menu button, that opened links for smaller sreen size and that it didnt disturb larger sizes. Unfortulately nothing worked untill you showed us. THANK YOU FROM THE BOOTOM OF MY HEART!!!

i've been enjoying your tutorial a lot lately, great work.

Thank you a million , You really stand out

thank you dude. you are amazing!!
I need the picture "burger.png" to complete the tutorials with you
I didn't found it inside the files on "https://gitub.com/iamshaunjp/psd-to-wp/tree/e32ebe67272bfc3def6f3f89e7107a21071d42fb"
Can you upload the image for me pls ?

<3

8:20 no need to copy those changes to the file manually. You could've saved them through the browser.
Look at the file name style.css in the Sources tab, it has that asterisk sign * at the beginning / end of the file name.

Thanks for the great tutorials, where could I get the logo of the menu. Thanks!

Amazing I have spent a whole day trying to figure how to do this, this tutorial just saved me. Total noob here. You just got a subscriber

My doubt is, how you do it so that little icon just appears when its mobile size?

Weird probelm—changes specified within the media queries will show when I manually resize my browser, but will not show on DevTools???

Your code is so clean! Thanks for the series.

For those without image:

html: <div class="burguer-nav">
<div class="btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
</div>

css:

.burguer-nav {
height: 40px;
width: 100%;
background-color: #404040;
padding: 10px 0 0 0;
}

.btn {
cursor: pointer;
width: 30px;
float: right;
padding-right: 10px;
}

.btn.open .btn-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}

.btn.open .btn-line:nth-child(2) {
opacity: 0;
}

.btn.open .btn-line:nth-child(3) {
transform: rotate(135deg) translate(-6px, 6px);
}

.btn-line {
width: 28px;
height: 3px;
margin: 5px 0 0 0;
background: #fff;
transition: all 0.5s;
}

header nav ul {
width: 100%;
background-color: #444;
display: none;
}

header nav ul.open {
display: block;
}

header nav ul li {
width: 100%;
float: none;
margin: 0 auto;
padding: 5px;
}

header nav ul li a {
color: #fff;
}
 
js

const btn = document.querySelector('.btn');
const ul = document.querySelector('header nav ul');

btn.addEventListener('click', () => {
ul.classList.toggle('open');
btn.classList.toggle('open');
});

Thanks so much for the menu tutorial. Could you please comment on the best way to make the menu include sub catagories? Thanks!!!

Great tutorial. Thank you very much

you must write background-repeat:no-repeat;
instead of
background-image:url(images/burger.png) no-repeat 90% center;

4:40

I literally have to say by far this is the most simple, well explained, and well taught tutorial ever watched.  I have watched literally 20 different tutorials and neither could help me properly.  I was able to follow this one and was able to achieve what I was attempting to do.  I am still a rookie in the land of JavaScript and jQuery, but I was definitely able to follow this and do what I was trying to accomplish.  Thank you for this video.

Thank you so much! I literally can't thank enough. I have searched for this kind of video for AGES, and finally, I found one that explained it good enough for me to understand (I'm very bad at HTML/CSS/JavaScript). Just subbed and liked!

This is why Bootstrap gets handy but anyways still an awesome tutorial!

OMG, totally worked (after I removed my typos from the JavaScript #facepalm), thanks a lot!

Awesome Tutorial Bro. Keep going

Wish you had used it without Jquery. Like you said in the DOM tutorials

Thanks Man!

Thank you so much <3 <3 I finally did it ^_^

V good tutorial thanks

Mate, this is the best, tried so many tutorials and even paid versions. But you made it so easy! Thank you!

Hi NetNinja, big follower here 🙂 Thanks for the amazing videos. Awesome! What is the purpose of that <h2>Main Navigation</h2> in the HTML? It has text-indent of -10000px. Thanks

Hello! I love your tutorials but just not sure why we have to use jquery here? I am wondering if you can help me with my navigation menu? I have been following another tutorial but don't like my responsive design that much and would like to change the layout

which version of the photoshop you are using ??

Great video, but not working for me:(

Where can we get these CSS and HTML scripts/codes??

Is the 'Hamburger' image available anywhere? -ty

Hi, I would really appreciate if you can answer this question. Is there any way I can do this without collapsing/pushing the image below? Like I want the menu to expand on top of the image. I played around with "height:auto;" on open class, but I do not know where to start from there. Thank you as always.

Hello! I put the css and JavaScript code in for making the interactive menu with burger icon but it's not showing up on my site… Maybe I don't have my html css ajd JavaScript files connected or referenced right? PLEASE HELP ME! : )

Your tutorials are the best, thank you!!

Brilliant tutorial, this helped a lot ! Thanks Net Ninja 🙂

very nice!

The way I had mine set up didn't work with the tags "header nav ul" I had a primary and secondary header. I had to use class names I had assigned to the navigations. Thanks, your video was so helpful!

Why he put js files after the body tag? I think he must put them before the closing of body tag right?