Responsive Pure CSS Menu Tutorial (No Javascript)

[@FollowAndrew]

Hi folks! Just added another awesome video tutorial, this one covering html and css responsive menus without any javascript! Another tutorial with Flexbox nav: kzbin.info/www/bejne/bKHMlaadmrF_sKc Thumbs up, like, subscribe and all that good stuff...

[@zoltakevangee4445]

Hey Andrew. hi how u doing? i really hope u oookay!! You have no idea how valuable this video was...Its a big effor from u making this video and I appreciate it i mean it...Tnanks thanks thanks...long life for u my brother...

[@frederickadewole7434]

i genuinely understand this tutorial but when i try to do it on my own following same directions, it didn't work for me but when i copied yours from github it function fine, my issue is with the (:checked) part, i've looked at it carefully and i still don't know what's wrong with it....... i really need your help

[@krissloo143]

you forgot the hit the bill part :)

[@BillyLoweBeauty]

add logo?? float logo left,,, menu right??? should logo be part of navigation or set aside??

[@davidzwart2940]

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

[@FollowAndrew]

Glad it helped!

[@MauriceMtl1965]

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!

[@richardsinkler5898]

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.

[@p86167]

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

[@gatluakkuei3163]

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

[@FollowAndrew]

Thanks. It's a bit of a fine line when teaching to 'guide' without giving too much away and help with concepts that (to the teacher) seem obvious!

[@ricardovegi7097]

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!

[@FollowAndrew]

Glad I could help

[@DeanForantDesigns]

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.

[@davidglabais4919]

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.

[@ashleyrossgoingmerrily]

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

[@FollowAndrew]

You're welcome!

[@prsh1989]

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.

[@FollowAndrew]

Thanks Priyank! I do try and explain the concepts in my videos, rather than just show the code. It takes a bit longer, but I’m glad you were able to follow along and pick up some tips & tricks. Best.

[@jakeduhh2122]

wow! detailed comment. But totally agree!

[@bennyo39]

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

[@bradahrensforcongress]

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

[@BobCat981]

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.

[@jacquedreyer5479]

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

[@FollowAndrew]

No, the selector could just be .menu-icon. If you had multiple “menu icons” on a single page, then you’d want to nest the selectors in the parents to avoid overrides... No particular reason for not using flexbox.

[@pradeepn7]

Very Well Explained . Thanks.

[@barbarakovacs4666]

Thank you, awesome. Clear explanation, we all really appreciate people like you. I have one question: is this short media query is enough to make a website fully responsive? Like for smaller or bigger phones as well? Thank you in advance!

[@FollowAndrew]

You'd need to add quite a bit more css into the media query for a fully responsive website, but yes one single 'media query' is enough. Most websites have 2-4 media query breakpoints.

[@barbarakovacs4666]

@@FollowAndrew Thank you! In my projects, I also use like 3-4 media queries, but following your tutorial, it seemed that in simple websites this single query was enough for me

[@germantoenglish898]

Thank you, a very clear and concise tutorial. Would it also be possible to use flexbox instead of float?

[@katalinpeli9849]

Hi thank you for your video. I have one question. How do you close the menu after clicking on a menu item?

[@vince8093]

hey ı did your navbar it works good but ı need to put a img logo you know but when ı put and resize as a phone it goes out of the navbar what should ı do

[@ImranKhan-iz1tt]

Nice one. There is only one problem, The transition is not working. Maybe due to browser compatibality. I am using Chrome

[@megadevs]

15:20 Estou implementando seu código no meu projeto, porém quando chego nessa parte o fundo do header some, mas os links do menu continuam visiveis. Sabe o que possa ser? Um abraço do Brasil

[@bolowono]

very nice

[@juanquintero5458]

Hi Andrew. I was wondering something. when you use ".header ul" and specify the conditions for that element, is the same thing when we declare ".header .menu"? because you declare them for separate. i was trying to do a hamburguer menu but the ul doesn´t respond to the "max-height" property and I still don´t know why. I hope you keep doing this videos, they are very useful!! regards from argentina

[@FollowAndrew]

Header .header ul and .header .menu are the same html element, but they do have different specificity. I'm not sure why I did that, it's been too long for me to remember.. :)

[@KaiBuskirk]

cool sp\o far thank you!

[@MrNandy-king]

op man

[@mckibb_n2868]

Hello Andrew! I was just going through your ScreenCast on Scrimba.com and it seems like you ran into an audio issue with harsh feedback cutting through from -22:00 to -18:00. If you're interested in fixing this issue, I think that people looking up your Screencast would highly appreciate it. Makes me wish that that website had a user ticket system, but I hope this gets to you. Sincerely, Avery Angel

[@FollowAndrew]

Thanks Avery, I am aware of that issue, but not sure how to resolve it. I think it's because the system tried to do echo cancellation and noise suppression on the audio. I double checked, and there isn't a way (i can tell) to uncheck that after the fact... I've got a message into the support to see what if anything can be done...

[@mckibb_n2868]

@@FollowAndrew Thanks for the response. I'm just happy you had another resource for me to use here. Playing the youtube audio in the background behind the scrimba seemed to do the trick lol.

[@vasudev16180]

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.

[@bryanskiffington1868]

menu will not go down after typing .header .menu-btn:checked ~ .menu{ max-height:240px; }

[@drewstifler1440]

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

[@paulkimotho8621]

Thanks for the tutorial. It's really helpful. I have a question. I want the menu to collapse back up(max-height to get back to zero) once I click on a menu-item. Can we achieve this with CSS?

[@dariorieder]

Hei Andrew Very nice Navbar. But can you explain how the navbar closes again after we clicked on a link? Thanks

[@Erik-or8go]

I have the same question, menu not closing after clicking a menu item (in mobile hamburger view)

[@stargazer3049]

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.

[@wikituby]

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

[@yuriyzadorozhnyi3849]

Привіт з України ! Щиро дякую за цікавий контент і можливість вчитися на Вашому каналі ! Дай Бог Вам здоров'я !

[@LucianoClassicalGuitar]

Amazing, is there a way to make the rest of the screen dark while hamburger nav menu shows up? This way the menu stays bright but the rest of the screen goes a bit darker. Thanks!

[@danycompservisracunara2717]

First of all, you didn't show us the responsible of your header. But, like I can see of that there would be BIG nothing. Dev, you fought with one stupid hamburger line by line, for 43 minutes and twelve seconds. By the way, your video is called "Responsive Pure CSS Menu Tutorial (No Javascript)". Go ahead, bro time is working for you.

[@ermacheton]

Andrew, When I click on the burger it wont do nothing, I copied your whole CSS file and still don't get any menu to appear... WHAT COULD BE HAPPENING?

[@12ty]

Hey, friend - this isn't actually an example of an accessible control. Fundamentally, it's not keyboard accessible, so it can't be focussed, and even if the checkbox was focusable, this is not the correct use of a checkbox. Unfortunately, we need Javascript for this. It's a hack, otherwise, and creates more accessibility issues than it helps or addresses.

[@ernestukut2767]

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

[@OrincyWhyteDesigns]

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

[@rlhismonit]

At 768px my menu dissappears when hamburger is clicked and it has a hover box for the links that is stuck in between the logo and the hamburger. I am stumped on how to fix this.?

[@richtemen]

Very well done tutorial. Clearly described and easy to follow and understand. However, my website is structured differently, and so I am not sure how to modify the code to make it work. Are you open to assisting me with my current code? Thanks,

[@majik895]

Wanna do something special? Check out the burger king navbar. Do that brother! Tried a few times and came clone but no burger.

[@AE-yr6mo]

I really like the idea of sticking to just CSS but is this something you'd actually use professionally? Like is it practical / quicker or somehow more efficient?

[@quiztherapy6851]

i've been following along. everything was ok until the part when you click the hamburger menu and it expands showing the menu. Checked all the code 2 times but i cant spot a problem. What can be the reason for this. The video is clear and easy to follow! i was able to create the horizontal lines of the menu until i got stuck.

[@Syllos718]

Great video, I followed along and couldn't get the hamburger menu to animate to an X. Is this because I was using chrome? Thanks for the great tutorial.

[@michaldoubek891]

Should we care about accessibility? Because screen reader should only read HTML list with links, shouldn't it?

[@maxzamos8966]

Hi, thanks for the tutorial. I notice that it's necessary to click on the x to make the menu disappear after hitting a link. But is there a way to make the menu disappear once a link has been clicked, without having to click on the x again?

[@theoglossa]

Great! I've been looking for this. Would this also work with flexbox?

[@MiBSuM]

Wow! What a great video! This is exactly my taste: Every little bit is explained. This is how someone can really learn things! Thank you very much! There is one little flaw: You've added grey borders to the right of all Menuboxes. Therefore the most right one got this grey border too. How to fix that? Give every 'li' a name and set it individually? And how on earth do I center the menu?? float:center isn't a thing. - I don't know why the developers of css have missed that. So how can it be done? Position:relative; left:50% doesn't do the trick, because it doesn't grab the thing in the middle to position it.

[@MiBSuM]

Answering myself: Here is a solution: position: absolute; left: 50%; margin-right: -50%; transform: translate(-50%, 0); With transform it actually moves the menu half of it's own width centering it.

[@FollowAndrew]

For removing the border on the last element you could use the CSS pseudo class of :last-child (see: developer.mozilla.org/en-US/docs/Web/CSS/:last-child)

[@dr_e-commerce]

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

[@rafuri_1]

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.

[@arunrawat3142]

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

[@rogerschinkler6975]

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

[@devShahriar]

what if we want to make a multiple dropdownbox with this css ?? i have a code can anybody help me to fix it??

[@and_rotate69]

i literally copied the code but it didn't work the menu button didn't show after collapsing

[@kainblock]

Why 48em is 768px ? I am talking about media query

[@prajaktasathe6805]

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.

[@rahultirkey7950]

If you put 135deg then the cross animation would look awesome

[@semnijipa2649]

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

[@TheLebronce]

but can I make it when I click on the CORP to open the menu instead of the burger?

[@ChrisPollard]

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!

[@rohankurdekar6238]

Hello sir I want to know , how to write anything on grey background Please let me know soon

[@sova3220]

it`s very cool but how about submenu in submenu?

[@wikituby]

we need source code please to avoid over typing

[@dcuztheone769]

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

[@msbecks3806]

I found this very resourceful and easy to follow. Thanks

[@mukut5ul]

Great tutorial. Can we avoid float using grid or flexbox?

[@pcerrorsandsolutions3438]

Can I use this navbar with Bootstrap 5? If yes! then how?

[@MariaEduarda-cx6jt]

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

[@jkkannoajiya]

Menu is not hide and show my html page .. can you check my html and css

[@alejandroramos5411]

Everything is very nice, but I have a question. How do I make my header stay black in pc view? With floated elements the header disappears and the black color is lost. Thanks in advance for the answer.

[@alejandroramos5411]

I discovered that it was missing. position: fixed; z-index: 20; Thanks for the video

[@cfitt]

Hey Andrew! If you have time for a question I would sure appreciate it. In the header div for this video I tried applying flex box to align the menu, a logo pic and a h1 title and a h2 subtitle. Flex made the css for the menu invalid. Should that happen? Thank you!

[@cfitt]

Nevermind man. I figured it out. Just took some time.

[@charlesbonyo4640]

I have learnt something from this video. Thanks alot

[@batchrocketproject4720]

Very clear with really useful explanations. Thanks.

[@FollowAndrew]

Glad you liked it

[@yunieskycg]

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 .👍👍👍👍👍👍👍👍👍👍

[@FollowAndrew]

Thank you! 😃

[@ahmedch6633]

Hello Andrew, I wonder if hamburger menu for mobile generally need to hover effect. In my opinion the answer is no. Thank you for the video anyway.

[@FollowAndrew]

Yes, you are right. No 'hover' on mobile, but hover interactions do get converted to 'tap and hold' on some mobile browsers

[@krishnajikulkarni8775]

Plz tel me How to collapse menu onclick of body

[@Kcoaco]

You're a really good teacher. Thank you.

[@andy_frank]

Thank you, really. You are the absolute best

[@HELIOSsanta]

Thank so much You did a great job

[@myoozikman]

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

[@ihorv44]

a lot of thanks for such helpful video

[@doineedthat]

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

[@FollowAndrew]

Glad to help!

[@bari88pl]

It does not work on mobile :/ why?

[@mohamedyoussef8835]

Awesome Tutorial ++++++++++++++++++ Thank You

[@its_ahmed]

Thank you so much pro🇮🇶🤍

[@RoamingAdhocrat]

This is very cool. Thanks for the video! One thing I don't like - you hardcoded the menu height to 240px. If you change the number of menu elements later you'd need to change the stylesheet, right? Can CSS compute that value?

[@markzait2750]

Very nice video! Thanks!

[@PancakePaperie]

Hey this is great thanks! I used it and it worked but now I am having trouble creating a dropdown menu from within that menu. Would love to see a tutorial on that!

[@blitzgaming2771]

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

[@CharlesSmall]

Thank you for the video

[@scrafya8190]

You are a fucking legend mate

[@johnpelitidis6297]

Excellent, thank you.

[@ErnestSchloesser]

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

[@georgesmith3022]

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

[@alicemarie8457]

thank's a lot for this tutoriel

[@mdtechtamizha8813]

Super great teaching man

[@rev1595]

Thanks for the tutorial. Very helpful. My only problem has been that when I switch the selector from "nav" to a class ".globalNav" (so that I can use the nav tag in other locations) the drop down stops functioning in mobile. The sub links only work when the mouse rolls out, and not when they hover or click. I can't figure out why, if I switch from tag to class as a selector it wouldn't simply work the same.