Pure CSS Hamburger Menu & Overlay

In this video we will create a landing page with a pure CSS responsive hamburger menu (No JavaScript) with a bit of animation using CSS transitions.
CSS Starts - 6:27
Menu CSS Starts - 15:40
Sponsor: Freelancer Bundle (Use "brad25" for 25% off)
studywebdevelo...
Code:
codepen.io/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Modern HTML & CSS From The Beginning:
www.udemy.com/...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@tryfanevans7047]

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.

[@AKagNA]

yeah right

[@cleancodez]

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

[@smokinghot5373]

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.

[@cleancodez]

hi smoking....):

[@ac695]

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

[@mascatrails661]

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

[@KuldeepSolankiYT]

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

[@christian-schubert]

After some project development heavily relying on javascript functionality, I was racking my brains trying to revert to a clean and strictly minimalist approach to implementing a responsive navigation menu, an approach that at best should eliminate the necessity of Javascript usage altogether. ...gave up and eventually started cobbling together some code when I noticed a new video on this channel that I merely wanted to watch to distract myself a little - and BOOM! That checkbox solution is simple. Clean. And BRILLIANT. Why did I not come up with this? Haven't been missing any of your videos lately, a BIG thanks for continuously creating and sharing such high quality content!

[@charlotte.upandaway]

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!

[@aleksandraryan]

That's what I love about your teaching style, that you start from scratch and build up the project 🙏

[@mahmoudhassen4463]

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!

[@sarahcharity5750]

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

[@CODINGISEASY]

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

[@republicgamer6998]

css can do anything it's just bootstrap make life easy xD

[@sushilkumarlohani6709]

CSS is made for This bro I can make Advanced Web Illustration with CSS I recommend to Check out the Channel 'Online Tutorial', for THE most amazing speechless Web Illustration

[@Digital963]

Yep! Beautiful isn’t it? It’s possible to do it just with css, in this case at least, because of the checkbox input. The entire menu relies on that. Brad’s cleverness really shows when he added padding to the hamburger container. That way you didn’t have to guess where to click to get it to work because with enough padding you can click anywhere on the hamburger. Good shit Brad! “Now get me those kha-kis so I can get warm it up. It’s freezin out heaa!”

[@rbahar2011]

One of the best tutorials out there on internet. Thanks Brad. Loads of love

[@nympho25]

starting from scratch... love it dude...it helps me understand and gives me practice on what is needed to start a project, I understand its second nature to you, and i appreciate it more when you go thru , what may seem tedious to do, i started last year learning the ins and outs of being a full stack developer, and what looks confusing as hell to others, makes so much more sense to me now.

[@Theygonnablowmycat]

somebody who actually explains his coding properly... Very good video, thanks for the help.

[@patriciacostalonga5282]

Amazing tutorial

[@filiporkowski]

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.

[@EdmundAlynJones]

Is that how it works?

[@impyworm115]

@@EdmundAlynJones yeah, the user's gotta watch an ad or watch the video for a certain time i think not sure

[@HossamKhalaf-sr1oo]

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

[@midoughost9380]

Just waw .. You're very objective in the way you make videos , not too fast , not too slow. Having courses on mostly every thing, bringing useful tips and advices every now and then. I Hope you keep this channel up !

[@Chuby_ubesie]

Brad u are the best there is. I find it hard to follow other tutorial channels. U have truly spoilt them for me

[@DavidBoutin]

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.

[@CJ-ew8df]

I never considered using an input field to add state for CSS selectors! Fantastic idea!

[@josema-boy7610]

This is amazing, such simplicity every time you code. Thank you very much.

[@allowmeasme]

CSS now a beast on it's own, still can't believe no JavaScript was used excellent tutorial. Thanks

[@MounirBoukhiber226]

From udemy course 😂😂✌ keep going brother 💓💓

[@Beny123]

I am impressed by the simplicity . Thanks Brad

[@avrumy]

I love this. The design is amazing and the idea is genius. Thanks for such a great tutorial.

[@caincanex3879]

Thanks brad big fan of your work. Learned HTML CSS and Javascript from reading online and of course from watching your videos. More power.

[@unleashedinc]

css has come such a long ways. thank you for making this training.

[@sgr2683]

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

[@raghul7211]

Super cool as always

[@DebVorndran]

Thanks Brad, I love it. I'm using it, and dumping bootstrap. My layout file no longer needs ANY javascript for MOST pages. It looks great everywhere I checked, except for on my old iPhone 5 on Safari. The 3 lines of the hamburger are not aligned when the menu is closed, and when it's open, it's supposed to look like an X, but it looks like a T at a 45 degree angle.

[@davescorneroftheworld1147]

There is no 45 degree angle ANYWHERE is his code!

[@mikersson]

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

[@Ferdam]

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

[@ninpasker3223]

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

[@healthrik2732]

Sir i love your straight forward serious way of teaching , very valuable content

[@mr.webdev3700]

Thanks Brad! Amazing as always!

[@Digital963]

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.

[@jimohyusuf8115]

Exactly

[@raghavgupta3168]

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

[@21Dimen]

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.

[@bulldog2024]

Great video as always. I also figured out how to close the menu and overlay when clicking on links. Thanks again!!

[@pradeepkumarkatakam929]

how to close menu when clicked on links using css only

[@lolypop185]

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!

[@tijani3141]

This is from your udemy course, love it man

[@lamstechgaming1899]

Hey, Thanks Brad for the video. me encanta cada vez que subes un nuevo video tocas temas importantes y super geniales ¡Está increible!

[@marksanford6534]

Great video. Very informative and easy to follow as well as understand. Now, we need a video showing how to add sub-menus into this menu.

[@mosesglitch3110]

really enjoy this tutorial definitely subscribing

[@shehrozamin9543]

Jazaak Allah Khair for such an informative video.

[@MaAlejaGaitan3D]

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 =)

[@chethanbhat]

Traversy Bhaayya Zindabad 😍✊

[@martinkarugaba]

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?

[@davidslee101]

Holy Sh*t - you just blew my mind. I had no idea CSS was this powerful

[@Daidera91]

Great tutorial, enjoyed it so much that i bought your course on Udemy.

[@shanegrayson7068]

Thank you for showing this! will be playing with this for sure over the next week!

[@koushikmajumder1898]

keep starting from scratch , it helps a lot for beginner like us.

[@mf-11111]

Thanks you Crack!! That's Awesome CSS!

[@FruityHachi]

a tip to write less code - i put reset styling for li and a tag at the beginning of stylesheet, so i wouldn't have to repeat it everytime i style elements

[@XMattingly]

Genius in its simplicity, beautiful in its execution. Awesome sauce! 😎👍

[@anag2125]

Just noticed that you left the code in CodePen! Thank you so much!! :D Gonna take a few styling things from there :D

[@SadDamniT]

Amazing. I will try this right now

[@juliusm.palsson554]

Great video Brad! Your tutorials are awesome!

[@bhfaught]

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

[@widheg]

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

[@elhampazhakh4132]

Exactly what I needed! Thanks!

[@TheDevilscrap]

Just amazing, nothing else to say...Thank You for this tutorial :)

[@DenisLukic]

Brad, thanks mate for this it is awesome :D Your work is the best to be honest and the way you explain everything is top class! I have watched a lot of tutorials from various presenters but your work is unique. All other video tutorials are kind of artificial, if u know what I mean but your approach is natural, when I wtch your tutorial it is like I watch some person I know and there is no acting and u put yourself on equal with others, that is how I feel when I watch your videos. Great work mate and thank you one more time for all knowledge that you share with others. Greetings from Ireland Cheers mate

[@jeromeelliah2294]

Great tutorial. So great explanation that i bought the course in the description below

[@tan4676]

Very pleased I came across this video, this has helped me with my web design revision a lot! Subscribed already :) Thanks for posting, have a great day!

[@grantwilliams9838]

Awesome video Brad . Now I gotta watch the css vids again 😁

[@skillzorskillsson8228]

since you use align-items:center and justify-content center alot you can just make a new class in html that you can use for all elements that will have these 2 css attributes and then you just write that class in css that contains only align-items:center; and justify-content:center; i'm not really sure how good i explained it but i think you get the idea. That is usually what i do atleast to avoid repeating code over and over again

[@manraf5987]

You are a legend keep it going!

[@cubedev4838]

im really appreciate!! U very good man.I made decision, im only want to watch your channel, the other channel i dont care anymore...u are the best channel for programming i ever had in my life. May u always in good health, u are very unic, awesome channel!! :)

[@Techthology]

If I could like this video twice, I would!

[@Drunkdrgonzo]

Cracking tutorial, I've purchased the course and will be looking forward to cracking through it :D

[@Sunset-ts8ir]

Awesome Tutorial. Worth spending hours practicing.

[@kamtron1544]

love it! thank you so much!

[@tomthumb2057]

excellent! thank you it went fast and I'm an infrequent user of CSS but very understandable...

[@MuhammadArif005]

Thanks for your efforts! The way you teach is very awesome.

[@marcelo_anselmo_levy]

I learnt enough with this video, Brad. Thanks a bunch!

[@samarthshinde9565]

You are best tutor Brad... your videos is help a lot.. keep coding brother..

[@damionreid3164]

I swear, your videos are the best

[@kitlogan1081]

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?

[@bagelproductions23]

same problem here..

[@adeleke5140]

Thank you so much Brad. This helped me out.

[@eliotovele1811]

The Greatest teacher...Thanks From Mozambique

[@mischafrei5156]

You are a God!! Thank you very much for this!!

[@kerryd2060]

Yes this menu is in your Udemy course Modern CSS/HTML. Will help re-enforce the learning to see it again.

[@JuanNadal]

That was pretty solid work!

[@andrenations1]

i really appreciate this lesson sr thank you!!!

[@kehbumasama5020]

Brad you are a blessing to mandkind

[@elviskbet6120]

nice stuff brad

[@Kempriol]

In some aticles more correctly in case border-box use *, *:after, *:before

[@jasenlakic5033]

got your udemy course on Javascript, really good

[@kornelgeczi4589]

Congratulation for your work Brad! From Hungary :D

[@mr.miniaturesmodels8465]

32:39 I'm watching this on a tiny phone screen while following along in my laptop. Just a note for the uninitiated in CSS: when he gets to this point, he's targeting the element with a tilde (~) character, not a plus sign. Prior to this, the instructor was saying what he was typing. At this point he doesn't and it's the first time he uses this syntax. It broke my code and I had to find the details in his Github. Otherwise, this was an awesome tutorial!

[@mr.miniaturesmodels8465]

/* Show menu */ .menu-wrap .toggler:checked ~ .menu{ visibility: visible; }

[@Josa192]

Thanks. It helped a lot!

[@nightlifeking]

I'm working on the hamburger menu on my app today, perfect timing.

[@livw31]

Very helpful and well explained. Thanks for sharing 😊.

[@maswirv]

You are an amazing teacher.

[@jelanibyrd5031]

Thank you so much, sir. Truly helpful and eternally grateful.

[@Daniel-ij2xy]

Thanks! Aweasome tutorial

[@HazemFanoush]

Very useful video and i learned a lot. Thank you❤