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.
Previous Video: • Build a Responsive SPA...
Source Code: github.com/TylerPottsDev/SPA-...
// JOIN MY DISCORD
/ discord
// Support me on Ko-Fi
ko-fi.com/tylerpotts
// FOLLOW ME ON TWITTER
/ tyler_potts_
// BECOME A MEMBER
kzbin.infojoin
// MY GEAR FOR CODING AND KZbin
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

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

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

[@asafrushiti5913]

One of the best tutorial I found in YT

[@TylerPotts]

Wow, thanks!

[@johnnydeymisson1842]

Thank you tylerr, hugs from Brazil ♥

[@sh9vch9nk0]

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

[@hardwired89]

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

[@Blue_Pumpkin]

Thank you. So easy to do.

[@getsturdy]

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

[@mooseydev]

Concise. Thank you!

[@TylerPotts]

Glad it was helpful!

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

[@user-yp1su8ye6z]

Thank you for this ! :)

[@randommosta2489]

100% clean operation

[@otepbergenovamadina6285]

thank you) this is awesome))

[@burgasdragonheirsilentgods]

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

[@TylerPotts]

Thank you! Cheers!

[@mareksamofal3929]

thank you!

[@aleksandarrasic4204]

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

[@TylerPotts]

Thank you! Cheers!

[@felixsowah8209]

Thank you very much.👍 great work

[@TylerPotts]

Thanks for watching, Felix!

[@gunjanpatil5692]

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

[@I1Ido.]

i recommend using font-awesome for the bars!

[@ObjectiveRealityIsKing]

Great video, thanks for sharing

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

[@priyadharshinimuthukumar8970]

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

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

[@vinzanity68]

fascinating. thank you!

[@TylerPotts]

Glad you enjoyed it!

[@omarruiz5423]

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

[@minademian]

Great video, thanks!

[@TylerPotts]

Glad you liked it!

[@gnomocoder2068]

You Are The Boss!

[@skolotoi4588]

awesome !! thank you

[@TylerPotts]

You're welcome!

[@stvnk1m]

Thanks for tip!

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

[@nox2sweet]

Thanks!

[@whyisthiscodenotworking]

thanks ! for the video loved it

[@TylerPotts]

Glad you liked it!

[@tipografico4477]

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

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

[@abiatama]

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

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

[@rangabharath4253]

Awesome

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

[@I1Ido.]

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

[@mikesalinas6245]

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

[@lance740]

Great video

[@total.telugu5503]

hello your explaination is simply superb

[@TylerPotts]

Thanks!

[@danielfernandezjaime5014]

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

[@hamdikurdi]

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

[@Imran-Desk]

Thank you big bro

[@TylerPotts]

You're welcome!

[@joeyywill1234]

thanks dad xx

[@fplfpl7890]

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

[@dontbetoxic4387]

git

[@Indischolar_yt]

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?

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

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

[@AKSHATmadan_]

im trying to make this in react but not working 😓

[@fitradical]

Niceeee

[@TylerPotts]

Thanks 🤗

[@ksriharsha2911]

🔥❤️🔥❤️

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

[@letsplat__]

What VS Code Theme are you using?>

[@raptorvenom7983]

It's Synthwave'84

[@ShivamKumar-vd1rb]

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

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

[@timifalode5152]

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

[@cjsport1254]

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

[@samrad6508]

10:49

[@yuriyzadorozhnyi3849]

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

[@ethanq2648]

6:28 the code for the burger

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

[@programmerrdai]

2nd

[@sandyrbierid3603]

Very happy 😍💋 💝💖♥️❤️

[@AllanOrtegren]

Where is the indian accent >:(

[@julianttaneok6390]

I'm Single 😍😥

[@mike4680]

I thought you were Julian.

[@Anonymous-bhai420]

your accent is so much confusing😑

[@zachfenton608]

Awesome