How To Create a Hamburger Menu in HTML , CSS and Javascript | Responsive Navigation Menu

Today, I’m going to show how to create a Hamburger Menu using html css and a little bit of javascript , also we will make it reponsive navigation menu .
If you enjoyed the video don't forget to subscribe and turn on your notifications! , Like and Comment .
Subscribe To My Channel and Get More Great Tips : / @lama-code
Codepen : codepen.io/m-m...
Download files from here : github.com/m-m...
Paypal Donation : www.paypal.me/...
Text Editor : code.visualstu...
How To Create a Profile Card Using HTML and CSS
• How To Create a Profil...
How To Create Linkedin Loader Using HTML and CSS
• How To Create Linkedin...
How To Create Transparent Login Form Using HTML and CSS
• How To Create Transpar...
How To Add Loading Animation To Website Using HTML AND CSS | CSS Loading Page Animation
• How To Add Loading Ani...
🎵 Music :
Music provided by NoCopyRightSounds.
Track 1: Culture Code - Make Me Move (feat. Karra) [NCS Release]
Watch: • Culture Code - Make Me...
🔊Free Download / Stream: ncs.io/makememove
Track 2 : BVRNOUT - Take It Easy (feat. Mia Vaile) [NCS Release]
Watch: • BVRNOUT - Take It Easy...
🔊 Free Download / Stream: ncs.io/TakeItEa...

[@Lama-Code]

Subscribefor more videos : www.youtube.com/@Lama-Code

[@DarkCupid762]

thanks for this, it's the simplest tutorial for a hamburger menu on KZbin! I had to rewind like 300 times but it's working! tnx again 🤘

[@Lama-Code]

thank you for your valuable comment

[@sagarniroula3644]

Thank you so much for this... You taught me a way no other video taught me... Simple yet very very effective... Love you 3000!

[@Lama-Code]

Thanks 😊

[@reinaogo7161]

I was just struggling trying to make a hamburger button!! Thank you very much for sharing your knowledge

[@Lama-Code]

Thank you too , keep learning

[@fiknahs]

You literally saved my life. Thank You

[@NicoHeinrich]

Beautiful. I love it when JS is kept simple like this!

[@carliosogaming9604]

I found other solutions on internet they do the same with triple amount of code. Thanks for make it simple.

[@Lama-Code]

Happy to help

[@geustodj]

for me, the first transition doesnt have a smooth entrance. what could be? thank u!

[@Mercenarys]

Same here even though nav .mainmenu{ has transition effect is somehow pops up not smooth too

[@santiagobonilla6306]

I had the same problem, you have to set "top: -100%;" and "display: flex;" inside the media query instead of "top: 0;" and "display: none;"

[@claudiodeidda6516]

@@santiagobonilla6306 Thank You :) :)

[@FCKApatheia]

@@santiagobonilla6306 THANK YOU DUDE

[@gatishiphoshoko6529]

The javascript code solved my problem Thank you

[@thematthewpryor]

This is quality. So simple and yet so brilliant. Thanks a lot.

[@front-endanimal6359]

very nice sidebar for my portfolio, i will use that. i'm too create video about that 😍

[@Lama-Code]

Thank you

[@front-endanimal6359]

@@Lama-Code you're welcome!

[@Mercenarys]

I love your code but what very wierd is how your images are used in tag which for some reason italic tag works as an Img? Very confusing & somehow my I'm don't active the nav .main menu to show so idk but still love your tutorial

[@Lama-Code]

tag is used to add icons from frontawesome library

[@davidlafontant2973]

Thank you. Concise and effective. You saved my life. 👏🏿👏🏿👏🏿👏🏿👏🏿👏🏿👏🏿

[@Anonimfj]

thanks, it's easy to practice and simple

[@Lama-Code]

Glad it helped!

[@TheDStecher]

There's a lot of positive people here. I'm not completely one of them. My criticism is rooted in one simple thing: the use of an external library without proper disclosure to that fact. In the video, the library is referred to as a downloaded file but on Github, it's linked by url directly from the code. While it's called "fontawesome-free", that doesn't necessarily make it free to use. Using this code in a project either doesn't work off the bat or opens up a potential vulnerability on top of making internet connection a requirement for further development. Removing the references to the external library makes the rest of the code useless since they are key pieces to opening and closing the menu. I'd think it better for image files to be included in the project and referred to directly so that there is no reliance on foreign, unexplained or undisclosed elements. Other then that, very to the point guide and clean coding!

[@sagarniroula3644]

i guess we could add a hamburger icon using three div's... not sure about the cross tho

[@yukihirasoma8167]

I followed but the instagram icons never appeared

[@Lama-Code]

if it dos't appears , then u shoud go to fontawesome website , copy the tag element of instagram icon and replace it in your code. Instagram icon : fontawesome.com/icons/instagram?s=brands Or u can download the source code of this menu from this github repo : github.com/Deltaty-Code/Humburger-Menu

[@autuhom5627]

@@Lama-Code i copied the element but its still not showing

[@Lama-Code]

Use FontAwesome CDN, and add it to your HTML file

[@Lama-Code]

Codepen: codepen.io/m-mourouh/pen/JjMQjOz

[@soblim]

Thank you so much , I love this video and the music !!

[@OpGamer-ge6ie]

Awesome Tutorial! Works and its responsive! Thanks

[@Lama-Code]

Oh thank u

[@farhaderonie363]

I agree with last comment I,ve seen other videos to this regard yours was and is THE BEST EZ AND SIMPLE more importantly no hidden codes and tricks hope will see more video from you do you any JS videos ? I also encourage you do more simple video like this one.thank you

[@Lama-Code]

thank you for your valuable feedback

[@nikolayliv9124]

very nice videvo, ij endžodžoj it veri mač, tenk ju sop much

[@billa4801]

Thanku soo soo much bro.. Its very easy.. I selected for a company😁🤝

[@Lama-Code]

Hhh, So funny 😂. Enjoy it.

[@billa4801]

Bro plz tell how to give nav ul li ul li >a show when i click. If i click than dropdown icon it suddenly goes up, the dropdown doesn't show plz send me the coding bro

[@Lama-Code]

@@billa4801 , u can use css or javascript to do this . u can download the source code from the description section.

[@billa4801]

@@Lama-Code ok bro i will try

[@arafathossain3778]

Great! very small and simple coding.

[@rokhafella8329]

Thanks for this. I have managed to incorporate it in my page. I am still struggling with something. When I click the humberger menu and close it, the background color remains as instead of disappearing. I am still working on a solution.

[@SnarfSnarf36]

Great video! Solved my problem quickly.

[@JstMental]

Yo m8 i have some problems with this kts all DONE but when i try to close thr menu its not working. Can someone help me thanks ❤️❤️

[@buckieblu]

might as well help him then m8?

[@learnwithzafartech9531]

i love it good job bro

[@sickobleeds]

I have a problem. I reduced the size of the navbar and the hamburger wont show. Please any help would be appreciated

[@Lama-Code]

Probably, you need to change sideBar position as well when it's opened so you can see it

[@ahmedmahfadi1631]

Thank you very much! very helpful video.

[@josephmubita9835]

Thank you so much. You have really helped me!

[@Lama-Code]

Enjoy it

[@codewithehr8376]

you are doing this job meine bruder just move on you'll be best

[@Lama-Code]

thank you so much

[@sahilkadam9737]

I added Javascript tag everything but the sidebar is not working.. tell me y?

[@Lama-Code]

I think you miss something in html but you can download the code from the description section 😉

[@alial-faqi]

Thank you, but I have a question, the first time I click on the hamburger menu, the transition doesn't happen

[@Lama-Code]

You can get the code of this hamburger 🍔 menu from the Github link in the description section and check if u forgot something.

[@adaezeikemefuna]

I love the simple js

[@carlonboy3692]

Thank u

[@Lama-Code]

Welcome

[@emmyrossini7229]

Why does my hamburger menu not going to the right? everything works fine but the 3 bars are stuck on the left side of my screen.

[@Lama-Code]

Try to watch this video where I created a hamburger menu using only css

[@MamamimPlodtook]

i have tried this code and problem when i click clos menu and wat to click on menu bar again ...there is a proplem. i think somthing wrong on JS but i am beginer.

[@Lama-Code]

Check the source code in the description section

[@edwaraguiar7868]

Excellent tutorial, thanks a million !!!

[@Lama-Code]

Thank you so much Edwar

[@makingtheweb6620]

I tried incorporating this into a website for practise. I cant get the bars to function when clicked. Can you offer any help.

[@Lama-Code]

Hi, If the click event isn’t working this means there is an error or a bug in the JavaScript code . I propose you download the source code for this Hamburger menu from the GitHub and try to integrate it in your app. You will find the link in the description section.

[@makingtheweb6620]

@@Lama-Code Thanks for the reply. I used the burger.html css and included js file into the Visual Studio and made some more tags, but bars are still not working. Desktops navs going from page to page, just the bars. Hmm

[@LuisMunoz-i5s]

I just need to know how or where did you get the hamburger icon. I watched your video few times, I went to your repository on GitHub. I even copied and paste it on my VS to see if I was getting something wrong, but neither like that I could get to see the icon :( any comment about it? Thanks

[@Lama-Code]

Yes, in this video I was using icons from FontAwesome library that had on my machine. But of course you can use CDN link and add it to use html file

[@Lama-Code]

Check codepen where I used cdn instead : codepen.io/m-mourouh/pen/JjMQjOz

[@LuisMunoz-i5s]

Thank you!

[@aymenennaji1445]

wa nta mghribi dkhl chwiya dial darija f hdartk hhhh

[@Lama-Code]

Hhh

[@sayanidas91]

Thanks a lot Sir.

[@abdullahabib1999]

Thanks bro everything is working but when I click on any menu it remains in the position, I want when clicked on any option shutter closes on itself.

[@Lama-Code]

To do this you just need to use a foreach loop for menu items and add an eventListen to each item so when it's clicked call the close function .

[@Lama-Code]

I have just updated the respo and I added this feature to the hamburger menu : you can download it from here : github.com/Deltaty-Code/Humburger-Menu

[@artembaziuk4457]

Nice work, man. Thanks 🔥🔥

[@Lama-Code]

💖💖💖

[@yoriichi2504]

Okay I made a site using this but when i debug it on codepen or git hub pages. On my phone menu bar is already opened for like 20px down blocking other elements on the site. How can i fix that

[@Lama-Code]

You can use this sidebar menu instead : kzbin.info/www/bejne/h4LPqamglKx-qdU

[@yoriichi2504]

@@Lama-Code Okay Problem Resolved : You just have to put height 85vh on @media query

[@blablablablabla1ful]

Hello, when I select one of menu - openMenu does not want to close. How to repair it? Thank you

[@Lama-Code]

to solve your issue , please check the source code in the description section,

[@ChrisEden_83]

hi Tazuzu did you sort this? I know where you're coming from, when you click the links the JS menu doesn't close unless you click the closeMenu? I'm just looking into this now...

[@ChrisEden_83]

I just added a new eventListner for mainMenu and it worked fine: mainMenu.addEventListener("click", close); Great tutorial Deltay Code! much appreciated.

[@toufiquekhan5436]

In midea query (position: fixed), why is it necessary? If i not put position: fixed then my close & hamburger menu doesn't work. Why is it happen? Someone please HELP me.

[@Lama-Code]

Why Position fixed is necessary ? Simply because when you scroll down we want to the sidemenu to be fixed so if we use the absolute position we will not be able to see the sidemenu if we are in bottom of the page .

[@toufiquekhan5436]

@@Lama-Code Thank u bro.

[@ANDREWBRYAN-i5c]

I So wanna you this in CARRD. i'm struggling with understanding how to piece these codes together to work in a embed element i've tested the html in W3school but can't figure how to merge the cssstyle to work.. Or maybe i'm missing something any help would be great

[@Lama-Code]

In this hamburger menu , I am using an external css file and a link element to link it with my html code. You can either use inline css or an external css file . I am using also Font-awesome library for icons so u need also to add that to your html to have icons on menu.

[@ANDREWBRYAN-i5c]

@@Lama-Code do you have a discord by any chance?

[@Lama-Code]

@@ANDREWBRYAN-i5c Yes

[@Lama-Code]

@@ANDREWBRYAN-i5c Discord channel : discord.com/channels/1195699503915868230/1195699505115443315

[@nikitafilatov6723]

awesome) i love it)

[@ellis-pr7hh]

little explanation would be really appreciated

[@Lama-Code]

Thanks

[@julianhorsesgaming7408]

Hey, good job. How do you select (at 01:43) 4 lines to write the same thing in the same time with VS Code ? Thanks

[@Lama-Code]

use this shortcut : shift + alt + ctrl + arrow_down

[@julianhorsesgaming7408]

@@Lama-Code ok, thanks a lot.

[@codewithehr8376]

thank you very much

[@autuhom5627]

The hamburger menu isnt popping up for me

[@Lama-Code]

You can download the source code of this hamburger menu from the link in the description section .

[@worldtrendtv01]

thanks so much

[@meryem3068]

I cant see the hamburger button, I verified it with replacing my code with the github code, and it's not working

[@Lama-Code]

you need to be connected to the internet because icons are imported from fontawesome library

[@meryem3068]

@@Lama-Code how is it transferred. can you help me?

[@heshboi]

@@meryem3068 Hey, you need to go to fontawesome website and get the url to post into your html area with the other links. That's how the take gets the icon. I don't know why this useless guy with his useless video didn't include this step.

[@coulbi8097]

hey first of, your hamburger menu is very nice and helpful thanks for that! but I have one problem. i tried to add opacity to the nav menu, but when i do it is not working anymore (in the mobile version) (its scrolling very fast down and vanishes) can you help me please :)?

[@Lama-Code]

I think that if you change the opacity of the navbar , this won't affect the functionality of the hamburger menu, Just try to download it from here : github.com/Deltaty-Code/Humburger-Menu. Add the opacity in your style.css file and that's it . I hope this help you .

[@lucianoneto2177]

NOSSA IRMÃO TE AMO !!!!!

[@salletob]

At minute 6.45 when I wanted to reduce to mobile, the bars disappeared. Unfortunately I abandon. Good luck to those who made it. Thank you

[@Lama-Code]

You can download the source code of this hamburger menu from the link in the description section.

[@ODaro-mc7nm]

hi, love u ♥ thanks

[@Lama-Code]

I love u too

[@christianbonaccorsi9586]

Great Job friend

[@Lama-Code]

Thank you very much

[@triviagamesfr]

thank you man !

[@Lama-Code]

you are welcome

[@kcol3747]

I don't even know where to begin, or where you went to start adding these codes. Or the platform. Would have appreciate steps

[@kcol3747]

Can u tell me where u went and start coding plz thank u 🙂

[@Lama-Code]

I started coding when I was in university, then I decided to improve my skills by learning from the internet (KZbin tutorials, coursera,openclassroom,....etc) , so always 'learn and practice' , this is my advice for u if u're new to the web dev.Good luck K Col 👍.

[@kcol3747]

@@Lama-Code i appreciate u thanks

[@kcol3747]

@@Lama-Code new sub

[@LiveINtheGood53]

you should explain what you are doing instead of putting in music. It's kind of confusing.

[@EugeneAdeyemi]

😂

[@eugeniotur]

gracias !!!

[@Lama-Code]

Th source code for this Hamburger 🍔 menu is on Codepen: codepen.io/m-mourouh/pen/JjMQjOz

[@maganabiyev2111]

thank you!!!!

[@Lama-Code]

U’re welcome

[@mistergameur51230]

how to have the 3 bars in full screen i would like to have it also even in full screen and how to add a direction to a link when you click on it

[@Lama-Code]

To add the bars icons use the fontawesome library

[@Lama-Code]

to add link onclick use the HTML tag

[@mistergameur51230]

@@Lama-Code where place the

[@Lama-Code]

@@mistergameur51230 in HTML file, just like this Contact

[@mistergameur51230]

@@Lama-Code its walking but I want that when I click on the instagram logo its redirects its just creates a link to ribbed

[@soniinfo7005]

thank man 😇

[@Lama-Code]

U’re welcome

[@hringamroll_no1371]

how to place the menu on the left ?

[@Lama-Code]

You can place it on the left using position property , check this tutorial where u can see how to make sidebar menu : kzbin.info/www/bejne/lYm1p4OQr7d8mNE

[@Everest_moli]

Awesome!!!

[@pashaverecni]

fa characters not working

[@Lama-Code]

You can find the source code of this project in the description section

[@saroshahmed7097]

Good one

[@Lama-Code]

thank you

[@agentsmith849]

I literally used your source code and this crap doesn't even work.

[@Lama-Code]

Check this one 😉: kzbin.info/www/bejne/h4LPqamglKx-qdU

[@simoid6246]

Baghi nsawlak

[@Lama-Code]

Mar7ba

[@gpickmeupt5522]

please reduce or REMOVE THE MUSIC: NOT A MUSIC CLASS YOU KNOW

[@Lama-Code]

Thank you

[@spyders4445]

B

[@_dikshantbisht]

brother no one needs background music ,instead you could have narrated the process.

[@Lama-Code]

I started improving the quality of my videos and I will replace music 🎶 with explaining projects I create. Thank you brother for your advice.

[@candy_front]

thank u

[@helloquestionmark9942]

I cant see the hamburger button, I verified it with replacing my code with the github code, and it's not working

[@Lama-Code]

you cannot see buttons if your laptop was not connected to internet because fontawesome cdn needs that

[@helloquestionmark9942]

@@Lama-Code it was connected to the internet

[@meryem3068]

it does not appear in me either. could you

[@gpickmeupt5522]

@@Lama-Code How do i contact you: i followed all your instructions, but my burger bottons won't expand. what could be the matter?

[@nameless798]

Thanks :)

[@melfordbirakor]

thanks a lot