Responsive Pure CSS Menu Tutorial (No Javascript) 

Hi folks! Just added another awesome video tutorial, this one covering html and css responsive menus without any javascript! Another tutorial with Flexbox nav: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6pidsgeLLzE.html Thumbs up, like, subscribe and all that good stuff...

This is an extremely well done tutorial. I could tell that you were fighting the urge to make your code DRY. Leaving it broken down into the chunks of thought was great from a learning perspective. Great job!

I have checked a lot it videos on how to do this using only css. This is the most well-explained tutorial. Perfect for me. Thank you

Explaining and understanding the smallest details is the key in learning. Gotta check your other videos. You got yourself a new subscriber!

Nicely done tutorial. Easy to follow along, and appreciate that you took the time to explain the sibling selector instead of just leaving people to either a) already know or b) blindly type along without knowing why. The why is usually more important than just the how. It's always better to understand why you do something a certain way!

I searched for days to find detailed explanation video of how this thing works and watched many clips on RU-vid. As for my concern, yours is the best! Thank you for sharing your knowledge.

As always, clean and to the point breakdown of a single topic with a lot of solid information.

Nice one! Just noticed it was published 4 years ago! OMG! I've been sleeping to much. Thanks Andrew.

You are AWESOME!!! So many videos on this subject, they don't explain things like you do. Some you can't even understand them. This is exactly what I need for a website I am making. I just need to figure out how to make it multi-level, but that shouldn't be too hard. I am now subscribed and will be checking out more of your videos.

Wow. This is the best video I've ever watched on youtube for coding basics!! You work at a pace that can be followed by us noobs and the clear and detailed explanations of each of the elements in the code are greatly appreciated! If I could make one request, it would be for tutorial on a slide -out hamburger menu created in VS studio and then implemented into a WordPress website!! Understanding that work process would be extremely valuable! Thank you so much for the great channel, new sub here.

i just found your channel and subscribed. this video was very well done. everything explained clearly. I watched all 43mins. Congrats!

the first from zero basics explained ever, i have been looking for this since 2013, thanks you just saved me

43 minutes just flew by, amazing tutorial, clear and concise. Definitely deserves more subscribers!!

Thank you so much for making this video. It was super helpful. You are an excellent teacher and you explain everything so clearly that I can actually understand what the code is doing.

Outstanding video! I've been searching 2 days for this solution, Thank you!

This video didn't feel too long at all. What good is a short video if it leaves you with more questions than before. Thank you for taking your time to explain in detail why you did what you did.

I'm not exactly a newbie but CSS has always been my weak point,so I followed, I paused, I tweaked, I unpaused, I followed some more and I learned so much! You are an excellent teacher, Andrew, and I love getting the context which triggered more than one lightbulb moment in me. Great stuff!

I've been trying to get things to work for a while regarding Burger menu just plain HTML/CSS finally your tutoring class so awesome, thanks so much will watching definitely.

Great video. So much better than the other tutorials out there that breeze over the actual theory and rush things. Much appreciated.

Incredible. Perfectly and concisely explained. You've gained yourself a new subscriber!

Hi Andrew! I am your new subscriber. I really liked your teaching style. It's absolutely crystal clear. I request you to do this kind of work. You really have a great future on youtube as well.

Great tutorial, didn't feel lengthy at all. You are a great teacher. Thanks a ton!

I love this video on the menu but especially on your menu-bar for mobile version!! Top explanation, Thanks!

Love this. This is an awesome tutorial. Thank you Andrew!

i love how you explain in details LOVE YOUR VIDEOs You got yourself a new subscriber!

Andrew, thank you so much for an awesome tutorial! This is exactly what I was looking for!

Self learner here. You are awsome, very easy to follow content you make me feel like a pro!

Amazing tutorial Sir. I searched for responsive navbar tutorial and all the ones I found were either with javascript or extremely hard to understand for a beginner like me. Thanks to god I found this tutorial. Sir, no one, no one in entire youtube has explained this concept of hamburger menu with only css, so beautifully and so clearly step by step in a manner that even a beginner can understand. While following you, I had literally smiled looking at the output and also because now I understand the background functionality of how actually this works because of checkbox. You have mastered the core concepts and helped us master too. You were hand-holding your viewers throughout and explained every logic so beautifully. Oh my god! To have mentors like you is a blessing. I am extremely extremely extremely thankful to you Sir for making such tutorials. Respect to you and god bless you Sir.

what's up guy, this video is amazing, I was to trying to make this menu bar, and I couldn't find by youtube, and you are showin be me, how many not is complicate, I learned by watching this one video of yours. congratulations man!

"I really want to demo this so you can grasp what's happening" and this is what sets you apart. I have been just banging my head against the wall trying to understand this, thank you dude!!!!

Great video and a good pace from a very decent teacher because i've been battling for year to for coding to click and today it all did thanks. More power to you.

Hi Andrew, I referenced you in an article/tutorial on a responsive menu. Thank you! Your tutorial was very helpful in coming to better understand this.

Even though the video was long, but it's worth watching. Nicely explained. Thank you so much for the tutorial.

Such clarity in you presentation, Andrew. And the simplicity in the coding is an inspiration. Most websites these days have coding on steroids - why do this if you can use first principles and keep it simple. Thanks so much Andrew.

The easiest subscribe in my history of youtube!!!! I wish I could like this video one million times. The algorithm was working in my favor today. Im just gonna rewatch it when I hit send on this comment. Thank you Thank you

I would like to vote you to be my Lecturer lol. impressive work ! you really tell us every single aspect that we need to know.

Thank you!!!! 7th time trying to set up my nav bar with just HTML and CSS. Finally one that works!

Andrew! Thank you so much! Doing this with javascript has been killing me because I don't know javascript yet! LOL . Following your classes now and I find you so very easy to follow. Let me know if I can do anything to promote you! Chris

This is great! Very well explained. Got yourself a new subscriber.

hello there ty for nice tutorial, good pace and explanations. Looking forward to watch your other tutorials. Live with Passion!!!

I found this very resourceful and easy to follow. Thanks

I don't speak english but your tutorial is explained in a masterly way. thank you so much. i think you are the most professional person you find on youtobe and i think it is not right that you have so few followers. i think it is a product of the great ignorance these days .👍👍👍👍👍👍👍👍👍👍

It is an excellent tutorial, very detailed step-by-step instructions, especially with explanation to understand what I am doing along with the video. In my opinion, the best way to learn is following the video with an ipad/tablet, and on the computer, use half of the screen is for Visual studio code with vertical split: one for html and and one for CSS, and the other half of the screen for the browser with live server. In this case, you can see which html element that your CSS coding is targeting for and how it reflects the result on the browser. Thank you so much Andrew for creating this video !

Wow this is Amazing! Very clear explanation, excellent for beginners like me. Thank you Sir!

Great video. I Used this to implement my own responsive menu on my site (still under development). One caveat, My web design uses a 3px padding around the body and I wanted the menu to be fixed at the top of the page. The problem with fixed positioning for the header was that when you use fixed positioning, the header width goes past the right padding specification of the body element that I had set. This is because the fixed property breaks the box flow of css. The solution I had found to remedy this was to use position:sticky. Unfortunately this property is not supported in IE (no big surprise there). Its not that big of a deal as Microsoft has all but abandoned their support for IE. in fact they are officially going to stop support for it in 2022 and a lot of big websites have already stopped supporting it.

Thanks this is a great tutorial, easy to follow and I like how you explain what's happening with the code.

Mr Andrew you are a great teacher, a learner really need to be treated as a learner, thank for the great explanation in details.

Finally, got it to work. Thank you so much!

Fantastic! Learned a lot and now have an amazing website template! Tysm!

Thanks, man. Love this

Hello Andrew thanks for this great HTML and CSS menu. cleared up a lot of issues

Thank you so much, sir for explaining how the input checkbox trick works.

Great video. Well done Andrew.

Dear Andrew You can be sure that I learned something as your channel is my classroom for over a week now … Your tutorials are really absolutely great … it’s a joy to watch you explaining things in such a clear and structured way !!! !!! !!! Thank you so much … 🦜 ☺️ 🙏

Very clear with really useful explanations. Thanks.

You Help a lot of people building there dreams and skill, Thank you for sharing your knowledge. keep it up 👍

amazing tutorial. I got much much more than before. thank you sir

You're a really good teacher. Thank you.

finally i got a person who actually rocks :D Thanks Buddy

thanks for the tutorial. It helped me a lot with my project!

Amazing tutorial! Very beginner friendly.

Thank you so much for this! Amazing and incredibly easy to follow even for a beginner like me :)

Fantastic tutorial!

It was great! Excellent!

Thank you! Another great (great also, because the time has passed and i didnt feel it) tutorial!

Thank you, really. You are the absolute best

I have learnt something from this video. Thanks alot

I loved your tutorial,Sir

Very nice video! Thanks!

Great tutorial, thank you very much!

Nice tutorial. Just what I was looking for. Spent too many years on the backend and middle tier that I have fallen behind on the UI code.

thank you very much! awesome tutorial, helped me a lot

a lot of thanks for such helpful video

For rotating the pseudo elements, you can use transform-origin instead of changing the positioning

Thanks! This was very helpful!

Thank You for this video, it's very helpfull!

Great CSS lecture. I will try this trick (checkbox+siblings selector+media-query) removing ugly float and try to change flex-box direction instead.

Thanks for this tutorial, very interesting indeed.

Nice tutorial. Thank you!

Very Well Explained . Thanks.

Amazing man i really love it

Great tutorial, thank you very much.

amazing video, thanks man!

Great video!

Just what I needed 😭

Excellent, thank you.

This video helped me so much

Super great teaching man

Amazing work

Fantastic video - I appreciate the way you explained your reasoning for approaching tasks a certain way (i.e. the checkbox and label state etc.). I do have a couple of questions to help me better understand: - Does the CSS selectors need to be written out in full i.e. would .menu-icon not give the same result as .header .menu-icon? - Was there a reason you chose not to use flexbox for the menu? Appreciate the video and the source files - very thoughtful and well done! Thanks

A very helpful video indeed! Thank you so much. Though, I was wondering how we could add some content below the header element and make it move down when the hamburger menu is opened.

Thank you very much for this lesson!

Thank you for all.

Thank so much You did a great job

whenever someone makes any educational video explaining and teaching any skill and publishes it for free - i cant have anything but total respect for that person.

What a god, Perfect - Thanks!

Thank you very much, perfect !

God bless you another mile stone crossed for me

Hello, I thank you. Your video is awesome. I hope to have more video tutorials. I'm from Vietnamese!!!!! Thank you very much!!!

Awesome video, easy to follow! Anyway to close menu after click if you have an anchor menu?