Pure CSS Hamburger Menu & Overlay 

every body is first Thanks brad....genius as always...

You helped me a lot. I was able to create and manage my own website. Thanks to you, man. Have a great day whoever is reading this.

From udemy course 😂😂✌ keep going brother 💓💓

Me: I already know how to do it. Also me: watches the entire add before the video, leaves a like, lets video play in the background to ensure Brad will get paid.

Thank you so much Brad for an awesome tutorial. I have a question. How do I get the menu to disappear after I click one of the menu items?

It would be helpful if you could split the windows in VS code so that we could see what HTML elements you are targeting in your styles. This would be helpful for those like me who aren't necessary writing it down line by line but more following along visually as a way to compare and understand your approach and it makes for a more efficient way of way of studying the content without taking away from those who need to follow along line by line. Thanks.

Hi, sorry but when you click on a menu item, it remains open, how do you close it?

Amazing tutorial

Just as I started thinking I was beginning to master css... then I see this video and find how much more there is to know. Thanks for keeping me humble.

Thank you so much! This is definitely going to help me 'wow' my professor for my final project this semester!

I know this video is a couple of years old, I have just one question. Once a link has been clicked, is there any way of making the menu disappear using just CSS or would JS have to come into play?

*crazy that you can do that with just css!*

Is there a way to have this same hamburger menu and effect where the input/ code is WCAG compliant?

Hi Brad, thanks for this, very useful. I'm trying to get the menu to disappear again when one of the menu items is pressed. The links I'm using are navigating to sections on the same html page, so the page navigates correctly under the menu, but the menu stays visible when it should disappear on tap. Any suggestions?

Very nice, thanks an awful lot - I've managed to incorporate this into my layout. Now how do I make the menu disappear when I click on one of the links?

one of the best instructor I've ever seen! Thanks Brad for giving us this quality content!

Wow, fantastic! Coded along with you again and love how this turned out. Such a creative solution to use the check box and its checked state to control the visibility of the menu

Which color theme are you using?

This is incredible! Thank you so much for such a high quality tutorial. I've followed along and made my own hamburger menu and am absolutely thrilled with it! Liked and subscribed!

Thanks you Crack!! That's Awesome CSS!

this is a nice tutorial but i have a question, Im making a one page website and have id's on the section but when i click the nav links its goes to that section but the menu overlay stays there, how do i overcome this issue to make the menu disappear when nav link is clicked

How can I make the menu scroll to section and then disappear after a click?

Excellent video man you have definitely helped me develop! One thing though, the page background overlay color appears for a split second when my page is loading. Is there any way to fix this?

Awesome! Is there any way to close the menu once a link has been clicked, please?

anyone has problems on responsive view on IOS/iphone? android withouth issues, but on iphone can only see the header row ...

bumped into a problem here.... when you use this menu on a landing page where you use links to scroll to some anchor it stays opened =(

Also, isn't it more taxing on the browser resources to target elements many levels down the inheritance tree than to add classes to the elements?

Awesome!! I love the fact that you give a rationale for each css property that you decide to go with. Super-helpful.

does it work in all browsers? especially Internet explorer 9 & 10.

Help! Struggling to make the animated menu overlay disappear when the links are clicked. Currently seems to be necessary to click the X in order to return to the background content.

This is from your udemy course, love it man

22:21 won't work for me please help , I do it same way but nothing happened

Hello Brad, I purchased a few of your courses from UDEMY starting in 2018. Coding is a hobby of mine, but I made and maintain a website for our local KofC council. I cannot find this hamburger menu lesson in your "HTML & CSS FROM THE BEGGINING." Can you tell me which lesson it is in? Thanks

Traversy Bhaayya Zindabad 😍✊

Just signed up for your HTML, CSS, & SASS course on udemy. Needed a modern refresher with grid, flexbox & sass!

Great hamburger menu -- with no (need for) JavaScript. I noticed something though that I suspect is unintentional: The tag is not closed.

Help Me: My list of links are right aligned and I can't seem to get them centered. Example: Home

Only issue was not being able to inspect anything within the showcase (main-body) class because the menu and menu-wrap classes are positioned above them. Solved this by simply adding this to the css and can now inspect everything below the nav menu header: .menu-wrap, .menu { height:60px; } Loved this workaround though!

I thought about it for a while ... and I don't know why you're using forEach to set up event listeners on every delete button. Would it not be better to set up a listener for the list, then evaluate if that list contains a 'delete' class, perhaps? If it does, then preform a delete on that row. What if I had 100,000 books? Setting up an event listener on EACH & EVERY delete button would be insane. Am I wrong? Plz give the comment a thumbs up if I'm right. Thumbs down (and hopefully some constructive feedback) if not. Thanks.

Thank you Brad, NativeScript & vue plz.

Super cool as always

It'd be cool if you could do this and it was coded according to accessibility standards. An unlabeled checkbox? No focus management? Not describing that the hamburger menu is a menu dropdown and not accessibly (programmatically) indicating state (expanded / collapsed)? Sigh....

First of all, amazing video! I tried to implement this css/html only visibility toggle method but I just failed. Gave up and went for an easy and quick JS solution. Anyway, I'm sure I'll get how that works someday. Still useful for the hamburger icon using pseudos (after/before). Gr8 stuff man

Great video! I implemented the menu, but how to close the menu once a link has been clicked?

Great video! But it’s quit some work for just a hamburger menu .. 🤔😐 Isn’t there a easier way? Thnx Brad👍🏼👍🏼

Hey, Brad! Can you help me a bit, please? I am using Angular in a project and I have created a nice burger menu following your video. I use routerLink to navigate to different links in the menu, but how can I make my burger menu dissappear upon clicking a link? I have tried different solutions but none of them worked. Thanks!

and the oscar of best developer and teacher ever goes to 'Brad Traversery' love from Egypt ..

All this does is print words on my page. There is no hamburger. Will someone please advise?

Loved the video. But I'm having a problem that the z-index of the toggler means I can't click on the "Read More" button. If I change that z-index then the button shows through the menu. Any idea how to solve this?

How do I close the menu after I click a link?

Quick question- is there any way to have the background image stay in place if the page scrolls down? Everything looks great but I guess because the position is absolute to top 0 left 0, if I have a page where content goes below the window, when I scroll the bg image scrolls away and the gray (from primary color) fills in the background space then.

Great tutorial! Thank you. By the way, I wonder are the clickable? I made a burger menu by watching this video but they're not even selectable as if you wanted to select text.

When the Navbar List items are clicked. The Navbar and Overlay remains. Please How do I remove the Navbar and Overlay when the Navbar list items are clicked. Thank you

Can anyone help me? When i press the hamburger menu i get the effect and menu to ease in. But when i click the hamburger again to close the menu, it does'nt "ease out"? It's just closing straight up. Otherwise, best tutorial on youtube :) @traversymedia

Checkout this playlist you will find almost every type of navbar ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-06UtXZo78ng.html

Hi guys, quick question. I've integrated this design so that it appears only at a smaller screen size. When I scroll the hamburger behaves like a sticky element, even though all the position is fixed.. Does anyone know the solution?

Thank you for the very informative video. I have learned a lot. What can I do to after pressing the about left, for example, the menu disappears again? And I jump to the for example on in the About section?

I wasn't getting any good video on overlay! But this video solved that problem to😊 Thankyou so much:D

hello. I was just using this technique for a personal website I am making. I wanted to include a link in the "showcase-inner" div but because the showcase height is set to 100vh I can't access it. Do you have any suggestions to help me get around this? Thanks

Jazaak Allah Khair for such an informative video.

If you click into the menu, click a page link, then click the browser back button, the menu with page links displays. How can I fix this?

Line 44: Why can't we just use .showcase-inner? I can't think of even a future case where we use the showcase-inner class outside of a div with the class of showcase and if we did, wouldn't/shouldn't we want/expect it to work mostly the same way?

Now here's a master class! Thanks Brad❤️

if you don't explain any tut, i don't understand anything..(i watched same thing from other channel) thank you:)

Why are there *two* (child and grand-child) inside the ?

Hey brad just thinking if you have the chance to read this. Just want to ask, i am using sublime text 3 and in the part of accessing the div inside the class hamburger it is not working. I try different methods but still doesnt work. Just taking a chance if you can read this. Thank you 😁

Hi, great tutorial, but I couldn't get checked:hover to work. Anyone?

When the Navbar List items are clicked. The Overlay remains. Please How do I remove the overlay when the Navbar list items are clicked.

Extremely useful lesson, I've learned a lot about creating a hamburger menu, transitions, animation and buncha other stuff. Thank u so much brad, sending love from Egypt!

Dude, I am learning SOOO much just by following along with your tutorials! Thanks for all these. I'll get one of your Udemy's courses really soon, probably that 50 projects in 50 days one.

Awesome video super helpful even after 3 years of creating this content, I was easily able to implement this code with sass.

How cool!! From 20-year-old Japanese...

My checkbox isnt inline with my hamburger nav lines? Is there anyway to fix this?

My problem is the checkbox is not centered inside the hamburger box, its aligned top left.

Is there a way to close the menu when one of the links are clicked? I am trying to use the checkbox for a hamburger menu but my links remain open and cover the section they point to. None of the videos I watched cover the solution to this problem is having

It is really impressive but... I am too newbie and I dunno how to make this responsive... :(

Thanks! Aweasome tutorial

Hey, how do you get the menu to close after you click on a link within it? I followed the steps in the video and everything works perfect except the part where you click on the link and the menu still sits there on the screen :D

Nice! I will make this one that looks really nice. Thank you for sharing!

A very big thanks🙏 for the Copious amount of knowledge you are giving to us. Lots of love from India.🙏

Gracias Brad!! I love the way that you explains. I'm doing your course modern html css from the beginning. It's awesome!! Sorry for my english =)

보통 햄버거메뉴릏 구현하기 위해서는 자바스크립트를 사용하는데요. 이 영상에서는 체크박스와 css 를 활용하여 부족함 없이 잘 구현해낸 영상입니다.

What if we want the circle to disappear when we click on another link? Right now you have to click the link and then X out of the menu. How would you get the links to do that for you?

i am following along. What can be the reason that my checkbox has not gone with opacity 0? thank you.

Thank you very much for helpfull content. Have a nice day :)

Thanks Brad! Amazing as always!

1)Thanks for great tutorial 2)Can we hide this menu and transform checkbox when click on links?)

0,4 😅

deymm the degree is complicated, one wrong value of degree could ruin the X position

Why not just put these styling in .container itself, rather than creating a new class? After all both the classes target the same div? 12:25

This does not work in iphone ios fyi. It will on codepen but that is due to it being emulated. If the browser is running the code it will not work.

OMG! This is so Complicated, I hope you make another Video on this, Thanks for Your Efforts, You Are The BEST!

Great work! Can you consider doing a video in which you show and discuss your Mac OS environment for development including hardware and software? Thanks!

So how about this tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dUPzppbfwWI.html

Where is the menu button it's just there but gone like invisible or something??

This is great, is there a wy to move the checkbox to the gith togheter with everything?

why is input tag so fucking weird? its like a little javascript window

This is a great tutorial. I love the aesthetic. I know this isn’t Stack Overflow but... ...when I applied this nav display to my portfolio it “covers” all interactive content on my portfolio even though it is not visible. Any tips to keep this design along with regular button function on the rest of my page.

Can you specify what materials were used? Im new to arduino so i cant identity all of that

I am unable to click on the menu button therefore no rotation nothing! Is there anyone with same problem??