Build a Slide out Hamburger Menu with HTML, CSS & JavaScript

Learn how to build a slide-out hamburger menu using HTML, CSS and JavaScript. We utilise the previous video code and implement the new slide out navigation menu and hamburger button to create a fully working mobile navigation menu.

// JOIN MY DISCORD

// Support me on Ko-Fi

// FOLLOW ME ON TWITTER

// BECOME A MEMBER

// MY GEAR FOR CODING AND YOUTUBE

All of these products I own and have tested!

// INTERESTED IN GAME DEV?

// CHECK OUT MY GAME

// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[utkarshverma]

by far the best and the most simplest way of creating a slide-out nav menu thank you so so much!!!

[knwr]

Very nice video. I looked around at a few and decided on this one to follow.

Word of advice: when transforming the hamburger to an 'X', the translate operation is tough to work with because you are calling it after the rotation, so the translation axis rotates as well. These functions work in sequence, so it is easier and better results are achieved if you call the 'translate()' function first. The resulting code is simpler as well:

.hamburger.is-active, .hamburger:before {
transform: translate(0px, 11px) rotate(-45deg) ;
}

.hamburger.is-active, .hamburger:after {
transform: translate(0px, -11px) rotate(45deg) ;
}

[getsturdy]

Me: writes down code
Him: "no, actually im gonna...."
Me: deletes the code

[catiaoliveira]

Tanks for your tutorial, you saved my life at 2 a.m, just a few hours before my presentation for a jury school 🎉 😍 👏🏼

[wiNtersPista]

Dude, best tutorial in responsive navbars!

[Yurusaii]

actually you can't hover in mobile but you can by clicking it.

[asafrushiti]

One of the best tutorial I found in YT<3 Thank You

[johnnydeymisson]

Thank you tylerr,
hugs from Brazil ♥

[Yurusaii]

i recommend using font-awesome for the bars!

[hardwired]

Thank you tylerr, ❤️❤️❤️ this javascript features

[priyadharshinimuthukumar]

Thanks a lot sir...its really helped me to develop my website

[shvchnk]

Thank you for this video, helped me a lot! Very useful and clear explanation 👍🤓

[sauleRK]

can anyone tell me what did i do wrong? my hamburger menu works just fine, all the animations works... however there's no X sign when the menu is opened
where could my mistake be?

[mikesalinas]

Esta chignon el sitio web, lo usare para mi trabajo... haber que tal queda.... gracias!!

[bl]

Thank you for the tutorial. I'm a bit confused though as to why you would create a secondary nav tag below the header tag. Look at video time line 9:15. Can you explain why you did it that way?

[connerdassen]

The three bars of the hamburger menu are stacked on top of each other no matter what, increasing the margin just moves them down

[burgasHoH]

Very nice video and example ! Great work and presentation again !

[Jrizy.]

I know this is an older video, but I really like that theme. Does anyone know which one it is or is it custom?

[total.telugu]

hello your explaination is simply superb

[bazeArttutorials]

good day, after applying you code, when i click on the hamburger it toggles open, but when i click on it the second time it doesnt close the menu, why is this sir?