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

[@utkarshverma3314]

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

[@TylerPotts]

Glad it helped!

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

[@wiNtersPista]

Dude, best tutorial in responsive navbars!

[@catiaoliveira6843]

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

[@TylerPotts]

Glad I could help!

[@getsturdy]

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

[@asafrushiti5913]

One of the best tutorial I found in YT

[@TylerPotts]

Wow, thanks!

[@Yurusaii]

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

[@aleksandarrasic4204]

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

[@TylerPotts]

Thank you! Cheers!

[@randommosta2489]

100% clean operation

[@mooseydev]

Concise. Thank you!

[@TylerPotts]

Glad it was helpful!

[@Yurusaii]

i recommend using font-awesome for the bars!

[@johnnydeymisson1842]

Thank you tylerr, hugs from Brazil ♥

[@vinzanity68]

fascinating. thank you!

[@TylerPotts]

Glad you enjoyed it!

[@whyisthiscodenotworking]

thanks ! for the video loved it

[@TylerPotts]

Glad you liked it!

[@Blue_Pumpkin]

Thank you. So easy to do.

[@ObjectiveRealityIsKing]

Great video, thanks for sharing

[@hardwired66]

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

[@skolotoi4588]

awesome !! thank you

[@TylerPotts]

You're welcome!

[@mikesalinas6245]

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

[@priyadharshinimuthukumar8970]

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

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

[@TylerPotts]

Hey, Sauler. Sorry for that, I'm not sure how to help but if you want to join my discord I'm sure someone will be able to assist you! There's so many awesome friendly devs who help eachother out :D

[@monicagarcia2592]

I'm having the same issue, did you ever find the solution for this?

[@Fkamynk]

@@monicagarcia2592 I had the same issue but then I realized it's because the X was behind the mobile nav. You have to add a higher z-index than the mobile nav and set the position to relative on the ".hamburger.is-active:after " selection in CSS. So the code would be this: .hamburger.is-active:after { transform: rotate(50deg) translate(-3px, 2px); position: relative; z-index: 100; } .mobile-nav { position: fixed; z-index: 98; } I hope that helps 😄

[@monicagarcia2592]

@@Fkamynk Thank you SO much. I'm going to give this a try. Really appreciate you replying, i was going crazy trying to figure it out

[@Fkamynk]

@@monicagarcia2592 lmaoo same!

[@felixsowah8209]

Thank you very much.👍 great work

[@TylerPotts]

Thanks for watching, Felix!

[@bl7937]

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?

[@balkarangrewal3646]

It is for the desktop view.

[@joeyywill1234]

thanks dad xx

[@minademian]

Great video, thanks!

[@TylerPotts]

Glad you liked it!

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

[@sh9vch9nk0]

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

[@omarruiz5423]

After the menu buttons are clicked, does the menu slide back in?

[@connerdassen7808]

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

[@moksh_plays5658]

thank your sir helps me a lot❤

[@TylerPotts]

Glad to hear that

[@ojoyemivhick4772]

@@TylerPottsGood day Tyler, I recently made use if your tutorial video for the vue js voice recognition application , it records and stuff, but doesn’t show text on screen

[@letsplat__]

What VS Code Theme are you using?>

[@raptorvenom7983]

It's Synthwave'84

[@burgasHoH]

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

[@TylerPotts]

Thank you! Cheers!

[@gnomocoder2068]

You Are The Boss!

[@CaddekPhotos]

Question: How come my values on translates differs from yours? Does that have to do with the container and how that is styled combined with the position in the container? :)

[@Imran-Desk]

Thank you big bro

[@TylerPotts]

You're welcome!

[@mareksamofal3929]

thank you!

[@stvnk1m]

Thanks for tip!

[@lance740]

Great video

[@nox2sweet]

Thanks!

[@abiatama]

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

[@total.telugu5503]

hello your explaination is simply superb

[@TylerPotts]

Thanks!

[@otepbergenovamadina6285]

thank you) this is awesome))

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

[@hamdikurdi]

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

[@ethanq2648]

6:28 the code for the burger

[@gunjanpatil5692]

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

[@danielfernandezjaime5014]

THANK U!!!!!!!!!!!!!!!!!!!!!!!!!

[@jakeochukoidamatie723]

followed every step to 8:47min and my hamburger doesn't transform, i don't know what could be wrong, someone please help.

[@daedalus5070]

Yep had the same issue and its one of two things: - Having the hamburger/cross as a button can add a "navigable" class by default so even though the JS is correct, the css never kicks in because the button becomes: ".hamburger .navigable .is-active" - 2nd can be hard to spot and sometimes easy to forget: .querySelector uses the css style class wheras 'toggle' doesnt. I had accidentally added ".is-active" instead of just "is-active" in the toggle. Hope that helps!

[@HayWhy_Pappy]

@@daedalus5070 still doesn't fix it for me. What could be the problem

[@HayWhy_Pappy]

Hey. How did you fix it ?

[@ShivamKumar-vd1rb]

why don't we use font-awesome for hamburger menu

[@samrad6508]

10:49

[@samrad6508]

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

[@ChromaticaCitizen]

Yeah I was confused about that too! Mine gets completely blocked.

[@knightingirl]

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

[@ankishkhandelwal7588]

so you see in .hamburger the content is .bar to get three lines and in .bar their is no content means if we give .bar::after and .bar::before this will give only two lines may be that,s the reason

[@TipoGraficoWeb]

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

[@rangabharath4253]

Awesome

[@indisholar]

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.

[@Bastian6071]

same for me. Have you found a solution yet?

[@timifalode5152]

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

[@AKSHATmadan_]

im trying to make this in react but not working 😓

[@fplfpl7890]

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

[@dontbetoxic4387]

git

[@anon89461]

Niceeee

[@TylerPotts]

Thanks 🤗

[@yuriyzadorozhnyi3849]

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

[@ksriharsha2911]

🔥❤️🔥❤️

[@one9959]

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

[@Bastian6071]

It's code. Code has no copyright

[@one9959]

@@Bastian6071 ok , i just wanted to use It on My website

[@Bastian6071]

@@one9959 yeah you can do so

[@cryptomjkjx4991]

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

[@AllanOrtegren]

Where is the indian accent >:(

[@programmerrdai]

2nd

[@Anonymous-bhai420]

your accent is so much confusing😑

[@danielalbert6834]

Thanks!

[@TylerPotts]

No Thank you! :D

[@zachfenton608]

Awesome