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

Great video

why my bars of the hamburger menu are stacked on top?? any solution?

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

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

Привіт з України ! Дякую тобі друже ! Thanks a lot ! Awesome !!

I didn’t catch an explanation on ‘is-scrolling’

Concise. Thank you!

Hello, your vscode setup is really cool . Can you share it?

It has copyright, or can i use It if i make modifications for My website ?

I've just subscribed to your channel sir and I need a little assistance with this. If I could write you on your email address, I think that will help a lot.

That is, I need an Element on my webpage to automatically slide-in 3 seconds after user opens the page. Once user selects preferred item and it takes effect, the element slides-out automatically also.

It is also a pop up from the right-hand side of the page, but doesn't need a button to open or close. It slide-in automatically 3 seconds after user opens the page, user click on it and select preferred item, and slides-out after user select preferred item.

This element is 'Google Translate Element',
I want the slide-in/slide-out effect to be from the right-hand side of the page.

I've written a snippet of code which I'll like you to see. Thank you, Your God bless you a lot!

GOSHHHHH u r amazing my friend. Well done !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Thanks!

Thanks for tip!

What VS Code Theme are you using?>

Thank you very much.👍 great work

Great video, thanks!

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

how is your logo and hamburger are still showing after you fully give the .mobile-nav a 100% height and width ??

Awesome

im trying to make this in react but not working 😓

Total bullshit. Time wasted. Nav doesn't work.

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

i recommend using font-awesome for the bars!

You Are The Boss!

Pls zoom in on the IDE next time, twas too tiny to watch

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) ;
}

awesome !! thank you

Thanks for the video, but i'm stuck here at the end. If I click a button in mobile nav menu, it don't take me anywhere. I think the navbar should go beck in the it should take me where I want.

how to add a slider on section banner in this code?

Thank you big bro

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

Dude, best tutorial in responsive navbars!

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?

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

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

My mind was blown....holy shit I didn't you could do that this easily......I was fucking around with if statements when all I could do is classList.toggle. Also that is-active class damn thank you for this video

100% clean operation

Thank you tylerr, hugs from Brazil ♥

hello your explaination is simply superb

after giving postion: fixed; to the menu, my nav-links are not working??

Hi, thanks for the video
Why did you use .hamburger:after and .hamburger:before , why not .bar:after and .bar:before instead?

thanks dad xx

how to enable this option to show the time when I was on a given line of code?

thank you) this is awesome))

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

Niceeee