Create a responsive navigation nav with no JS!

[@arsalanshaikh3763]

This channel is a gem on youtube ....

[@KevinPowell]

Thanks so much 😊

[@techtipsuk]

Yeah I agree my favourite web based channel and I sub to a few.

[@AM-lz5yn]

lost devtips but found kevin so i'm glad

[@saidfatkhana4930]

couldn't agree more haha

[@bambooindark1]

With 20/80 rules, high quality channel like this is hard to find at the same time. And there is too much unorganized stuff flooding on youtube stream.

[@lindsayreiner9872]

My CSS guru! 3 years later and this video is still saving us junior developers. I honestly don't know what I'd do without you!!

[@ldlouis]

Kevin, I'm a 70 year old and trying to create a website for a hobby. I have watched many of your tutorials now and I can honestly say your videos are the great. I have learned so much in a short time. Your delivery, techniques and explanations have made life so much easier. Thank you for being there and keep up the good work.

[@KevinPowell]

Thanks for the very kind words Louis! I'm glad that you're enjoying my content :D

[@alecmoore]

When you get a Wix ad on a Kevin Powell video: "I'm about to end this ad's whole career" Amazing stuff Kevin! I'm learning html/css and stuff like this gets me even more motivated and excited.

[@ItsSunnyMonster]

I don't like making websites with Wix. Yes, it is convenient, but you don't get the fun of typing the HTML and CSS by yourself.

[@gorillaau]

@@ItsSunnyMonster With Wix, you are not building a web site but adding to their product. A Wix site is not portable, in the slightest.

[@devmrin]

Honestly Kevin! This is the most - I mean that sincerely - the most I learnt watching any long format CSS video. This format helps unearth some of the gems which you'd otherwise never find that easily. Cheers!

[@KevinPowell]

Thank you so much for the kind words! Really happy to hear that you got a lot of value out of this, you just made my day :D

[@holdencn]

@@KevinPowell I'm with that guy Kevin. Really well done!

[@judahnime]

hey guys, I encounter a problem.. when I demo my code, somehow my checkbox can only be checked and cannot unchecked.. so basically i can only show my nav menu by check the checkbox, but i cannot close my nav because i cannot unchecked the checkbox.. can anyone help me?

[@clifhodges1509]

nice video man! i just discovered a quick way to make the hamburger... where you put your "X" type in "|||" and then style it with transform:rotate(-90deg)

[@playmatee1]

2019 is 3d, can we makethe hamburger as an object in space with shadow and animate/transform ? / Thanks for the tutorial m8 ur great !

[@Loopmootin]

I know i'm 7 months late, but you could also just do the ­☰ symbol instead of rotating ||| .. But the cool way of doing it Kevin's way, is that you get to define with width to thickness ratio, the distance between each bar and the possibility of curving the edges.. With the symbols it's kind of limited by the font you're using :-)

[@kalingagm4829]

Can also just use this instead: &#9776

[@lholland5212]

Been diving into the world of web development this past year and coming from a non-technical background i have to say you absolutely rule! You have no idea the type of impact your channel has had on my career trajectory. Thankyou!

[@devinjansa9329]

As I am learning to code, Kevin you are my go to guy! love the content, I have used multiple of your videos in building my first webpage. Thank you a million.

[@ChrisGearys]

I love how you show what every change does and the effect on the other elements. You've really helped me get my head around css and I'm now finding myself anticipating the commands you will use to achieve what you describe at each step which is reassuring for me. I personally like the longer video with the time stamp so all the info is in the same place without having to search for other videos. Thanks and keep up the great content.

[@bxrclxys]

Currently in college working on developing websites for my work, and came across this video. Super helpful tutorial, even if you don't know EXACTLY how everything works but you understand the basics then it is still easy to follow and grasp the concept - and can help you understand how they all come together. Watching almost 2 years later and is still one of the most helpful responsive navigation tutorials on KZbin that I can find. Much thanks to you, Kevin! really appreciate the video.

[@KevinPowell]

Really glad you liked it!

[@Protoscribe]

Was definitely worth the watch. Did not know of unset all thing.

[@KevinPowell]

I've known about it for awhile, but this was the first time that it ever made sense to use it. It's a pretty neat feature.

[@Protoscribe]

It is indeed a neat feature. I am sure to pay more attention to CSS and HTML docs from here on in.

[@srajaiah9846]

Kevin Powell how do I subscribe to your newsletter?

[@srajaiah9846]

I did not see the link

[@JulianColeman03]

I thought I was seasoned in CSS, but I always find myself learning something new, or rediscovering the basics when I come across a video by you. If there's a channel I genuinely appreciate, it's this one. Thank you

[@KevinPowell]

I still run across new stuff all the time. One of my favourite things about CSS is discovering new things. Glad to know I'm not alone in that! I'm glad that you're enjoying my channel!

[@justpeachyrl]

Thank you so much Kevin, from 4 years in the future! I have been consuming your content like crazy recently and the way you teach is absolutely perfect for my style of learning. It is ESSENTIAL for me to understand the WHY behind every piece of code I am writing, so I deeply appreciate the time you take to eliquently explain those details. Thank you again!

[@kerrykreiter445]

Echoing previous comments…thank you Kevin for all you videos, but especially this one. Maybe my favorite of any other KZbin css/html tutorials. Note to anyone wanting to build a website: let this video be the first thing you watch!

[@hugocsl]

And the new propert of the week goes to "all:unset" thats so cool!

[@KevinPowell]

Yeah, doesn't come into play often, but can be really handy, we just have to be careful because of browser support for it though.

[@holdencn]

I just hope the 'all' property gets widely adopted or I wont be able to use it. We have millions of users across MANY different backgrounds and systems. It has to be compatible with everything.

[@IceMetalPunk]

@@holdencn At my job, some of our clients still use IE 11.... you can imagine how sad that makes me since I have to develop around it 😂

[@holdencn]

@@IceMetalPunk I work at a university in Canada, so I feel your pain. Would you believe IE9 (and some on IE6) on Windows 7? **shudder** its true.

[@IceMetalPunk]

@@holdencn I would believe it, but... it hurts to hear :(

[@kashthrob]

Kevin you are a life saver ,This is the best i have watched so far ,you made it easy , thank you and God bless you

[@zanereeder125]

I love that you are following the "Mobile First" design principle. I now understand what that really looks like in practice. Thanks for your great content! Subbed for more!

[@KevinPowell]

Glad you enjoyed the video, and my approach, and thanks a lot for subbing :)

[@Nimbus_TheRainmaker]

Even old videos are gold. Thanks Kevin, I really meant it!

[@boggeshzahim3713]

This is the best hamburger recipe on KZbin

[@KevinPowell]

Haha 😂

[@williamgreen7048]

I thought I was pretty good at CSS, then I started watching your videos! LOL. Great stuff Kevin!

[@banicans5299]

Why does my code never work... i set nav display to none and it's still there, if i set other elements to display non they disappear but the only thing i actually want to disappear doesn't

[@parthparmar9798]

every time i get here on Kevin's channel, i learn something new about CSS.

[@ИльяВеличко-ц5у]

Thank you, Kevin, for such a powerful, lesson.

[@arturhakobyan3022]

This channel is like an island with the treasures in form of CSS lessons. Great job Kev 🔥🔥🔥🔥🔥

[@amirgheitasi3638]

That's one of the most useful tutorials I've seen in a long time. A thousand Thanks Kevin. You're awesome

[@KevinPowell]

So happy to hear that Amir!

[@heisteemi3428]

This was actually the simplest tutorial on nav bar animations I’ve ever seen❤❤❤❤❤❤❤🎉🎉🎉🎉. You’ve really helped me a lot😊

[@heisteemi3428]

First time I’m commenting on a KZbin video❤. I just had to

[@Toulkun]

I absolutely love your channel. Im building my first ever portfolio and first ever own web site, i know basics of html, css and a bit of JS and Jquery. Keep up the great tutorials, you deserve more sub's.

[@KevinPowell]

Very glad you're liking my videos Begichh!

[@aybak3k]

really best css tutorials are here im always sure I'll understand everything just like when I watch Elzero tuts unlike most CSS content out there

[@xnajx]

Thanks! This really helped. I just made my first website and I don't know JS yet.

[@bonbonpony]

There's one thing that I think could be improved: the moment it switches from horizontal menu to vertical menu, this menu is visible for a split second and then hides instead of being hidden to begin with. Is there a way to have it start hidden after it breaks to mobile width?

[@simaopacheco4529]

bro you will never see that happen, or you see in a mobile no chance that you get to pc layout, if you are in a pc layout as a user u wont shrink the website not even once think as a user have u ever do that?

[@simaopacheco4529]

stop over complaining. but something like in media queries use that section display:none ?

[@natashamoore5691]

This doesn't feel like an "over-complaint" to me. I see the same thing and it would be great to have this tidied up. Really appreciated the video Kevin!

[@CapsLock33]

the transition: transform 400ms ease-in-out; is super clean!!!!!

[@j.e.1620]

how can I add a sub menu to one of the list items of the menu with same drop down effect? since the menu uses a check box, how would I go about recreating this with a sub menu?

[@tumbler9428]

+1

[@ganeastefan4287]

add new ul and give it a different class, display:block,position: relative/absolute respectively, style them and so on.

[@jasonp6810]

I just started coding, age 27. I dropped my Udemy courses for Kevin Powell's channel. Dude, I thought people were doing too much when they referred to you as the KING of CSS, but now...I'm really starting to believe that's an injustice. GOD OF CSS, mate. Here's why: You mention the intangibles of almost every piece of code at the beginner level. I can only assume you are phrasing in beginner terms because as a beginner myself, I completely understand. You'd make a killing on Udemy. Love you, and please continue to teach in the exact same way you are. Your CHANNEL will feed many homes.

[@joseantoniostramucci351]

Hi Kevin! Thanks a lot, great content! Just a question... is there anyway to collapse the navbar after clicking the desired link??

[@eliphinobeats]

I'd love to know the answer to this too. I'm thinking with JS, click event on the a tags to set the checkbox to unchecked. Obviously this tutorial was JS free but...

[@masilli]

Hi! I have the same question... and I was wondering if you managed to do it, without JS. Thanks! ;)

[@mike82967]

This is my leading CSS learning site, well done.

[@jonah5908]

Hey there is a big problem with this nav in Chrome in some instances. The nav scale transition will fire off on refresh and it even shows in your video (when codepen refreshes) you can see the nav scale firing off. Now I couldn't fix the auto firing of the transition, I did remove the background color and instead placed it in the :checked state and it fixed it. EDIT**: So far there are two solutions which I have found. 1) (Without javascript) Hide the fact that there is a bug by setting the background only on the "checked" state. That way the transition will still misbehave but there is no background property, so we can't see it! 2) (With javascript) Use javascript to disable transitions on page load. Link here --> css-tricks.com/transitions-only-after-page-load/ for more info.

[@bdavibes]

Thank you for this. There's also the issue of still seeing the nav items misbehave. I changed their color to transparent and added it back on checked and in the media query. I also had to change how I selected them to retain the black hover color as well

[@taipham6302]

Thank you so much for all your free contents! ive recently discovered this channel less than a week ago in my journey into fullstack development and ive been on kevins page quite literally everyday since.

[@VinhLe-gc8ws]

Havent watched it yet but excited for a css grid video with nav as i have been struggling with it!

[@KevinPowell]

I hope it met your expectations!

[@henrivandesign4526]

Neat tutorial. There is just one issue people need to keep in mind when considering this approach: the menu will need to close again when any of the links are clicked, unless you're trying to make an inconvenient mobile navigation (in which case you will need to close the menu by clicking/tapping on the menu icon every time after you navigated).

[@markjordan7800]

we did miss you ;)

[@KevinPowell]

Awww thanks 😊 I missed you guys too

[@michalroesler]

We want more long and in-depth videos. I'll watch it until the very end.

[@SandraSun8]

Just found your channel today and your way of explaining things click with me very well. Starting with this video to finally build the hamburger menu that I tried to build for the last weeks. Very confident that it's going to succeed now with the help of this video. And there's a big plus...: you're cute!

[@yogawithcarlos]

SCREEN READERS: I thought this sandwich menu would read some bizarre spans that made no sense. Turns out it doesn't. It quite simply reads the nav items. It is screen reader proof. On mac voiceover it reads: 'navigation; list (x) items, etc.' Nicely done Kevin. Cheers.

[@jinx12373]

Been watching you for a while and it's your 3yr old video outro that got me to subscribe lol. Just didnt even think about subscribing, but I'm happy to show my support however I can.

[@mathiasmatanda8848]

Welcome back Kevin, you just came in when i was struggling with this topic, keep up the good work and i thank God for people like you

[@KevinPowell]

Always nice when things are timed perfectly for someone, glad it helped Mathias :)

[@jekkuh222]

Thank you so much, I love your videos and look forward to them. I’ve learned so much from watching you!!!

[@benney25]

I totally missed the poll, but if I had been there for the poll I would've voted for long form. Thank you for keeping it around :)

[@dereklawrie6672]

Kevin, I have watched many of your tutorials now and I can honestly say your videos are the best. I have learnt so much in a short space of time. Your delivery, techniques and explanations have made life so much easier. Thank you for being there!

[@KevinPowell]

Thank you so much Derek, really glad that you're enjyoing my videos :D

[@napalm_exe]

Kevin Powell, you're on my list of people who I plan on donating to once I get my first job as a developer. Thank you so much and keep up the amazing work!!

[@KevinPowell]

Thanks Marco :)

[@victorespinozalucena9163]

Amazing! You showed me how to simplify a lot of things that've been taking me a lot of work. Thank you!

[@emuemhonjieonosereme2495]

Thank you. First time I’m seeing navbar with no JS

[@pioleonardo]

I worked as a Web Developer but I've never done this. I will have to copy and implement this. Thanks Kevin for the time.

[@AhmedHassan-cm3yn]

Every second of this video is worth watching. Thanks a lot Kevin :-)

[@JLA85]

I'm not even halfway through this video and I gave it a thumbs-up. This is a really good channel everything is broken down well, and I'm learning new things. Going to rebuild most of my sites in my Web Dev Portfolio I have so much CSS elements and practices that I should revise and use less code/clean-up my code, that it isn't funny. Glad I found this channel!!!

[@dawnhouston6484]

Kevin, I am sooo happy I found you. You explain things so well including your reasoning behind your actions. Thank you for helping me understand CSS better. I am really trying to improve my technique so you have been amazing. If you have any other resources, please let me know. I am always looking for new resources for learning.

[@Yuhg1]

I know this video is like a year old, but thanks a lot for it. I'm forming myself as a web designer and this helps a lot. Definitely gonna check your other videos and learn from what i don't get to see in the classroom. Thanks!

[@rasmuslundby6041]

What a heavy job making this video and at the same time putting it on codepen!! Wow, well done and thanks a lot! Reards from DK

[@katem1102]

Thanks for the video. Honestly, to do all this as a beginner in CSS, it was a lil bit of a challenge, but worth it.

[@BashaBill5]

This is 2 years old (or more) but its a real treat! Happy New Year everyone!

[@MaakBow]

Thanks kevin. You explain things (even mistakes) so simply. I like how you separate extraneous code up front, so many other tutorials when you remove the extraneous css unrelated to the task at hand, you get two lines of actual tutorial code.

[@meghrajraee873]

Loved the smooth explanation of each and every code. You have got a new subscriber.

[@KevinPowell]

Glad you liked it enough to sub, welcome aboard!

[@engineering-ux]

Best Channel to Learn. High Quality Content. Thanks Kevin :)

[@DEBO5]

It's cool how much you can actually do with css. Although this is a limited approach, it is highly performative.

[@GauravSingh-sv5cw]

Watching one video of Kevin and I end up learning 10 amazing things! Masterful ideas and ways of working! True for ALL videos!! Thank you thank thank you!!

[@esraamohamed5601]

You are really The king of CSS, also you are a great teacher thank you so much!

[@hallwayraptor2036]

What a useful video. I think I learned more in the last hour than I learned in the last month about CSS.

[@KevinPowell]

Awesome, so glad :D

[@Protoscribe]

Your first video appeared in my feed and after a refresh this one did. What nostalgia Kev!

[@KevinPowell]

Haha, that's awesome!

[@suryashmalviya]

Love you man... Today you made me to fall in love with css.

[@bobdinitto]

Wow, this looks great Kevin. You've packed so much into this video I'll have to watch it seven times just to absorb it all. Thank you so much. I've seen the checkbox trick before but your clear explanation made it all that much more obvious what was going on. Also the use of :checked pseudo-class was awesome thus eliminating the need for Javascript. Interesting how you made the burger. Nice use of the fade effects and awesome trick using scale to get the transition! I love that.

[@nnwebdigital]

This tutorial is 2 year's old, but still is a very good. Kevin, you are great!

[@ZainNL]

I think you made me enthusiastic about CSS animations in.. Forever! What an awesome video :)

[@Safrix]

Thank you so much for this great tutorial! I have watched many of your videos and I must say that you are a great teacher! Keep up the good work! 💪

[@KevinPowell]

Thanks so much Antti, glad you're liking my content!

[@simonhallin1640]

After trying to make a nav with CSS grid this legend shows me the way, great video Kevin

[@CartmanMthrFckr]

Nice solution! I hadn't thought of that at all, thanks for that!

[@gearsighted]

This was excellent. I've been learning web development for around 3 months now and more advanced CSS is still pretty tricky. I'm can't wait to get into the rest of your content. Keep up the great work!

[@beksman0284]

You're my favorite KZbinr who teaches coding :D

[@sahildas.]

I read the description, and edge now does support all:unset; 🥳

[@matthewshelton1538]

You are my new favorite teacher. Very good job I love to complain but you have really put in the effort to explain and providing your source code to follow along with made my Heart swell with joy. Continue your awesome videos. Appreciate you, -Matthew

[@mrmamun5830]

Whoaa that was really a mind blowing tut for me! This is what I have been looking for. You are just awesome! Thank you very much for this amazing video!

[@osoriodanny]

Thank you, thank you, thank you!!! for this updated version. I follow the tutorial for your first nav bar but I had to give it up for all the reasons you mention in THIS video. Awesome channel!

[@dimitridehouck9506]

What a gem your channel is! Love it! Thank you so much for sharing!

[@AbhishekGhosh1805]

Probably one of the best tutorials so far! So many things to learn!!

[@KevinPowell]

Thanks Abhishek, so glad you liked it

[@thobiaslarsen8336]

This is very good for my school project haha. Amazing work. Love your videoes.

[@pliniojr95]

Thank you for this video! Since i started to learn HTML and CSS, your videos have being recommended to me, but i wasn't paying too much atention to it. But i came across with this very problem you solved in this video and i couldn't be happier with such first impression that you gave me. I've already hitted the subscribe button and gonna look for more content you added to help improve my skills. Thank you again, and greetings from Brazil.

[@Krispy2piece]

Great Video! I love all yiour videos! The way you explain things makes it so simple to understand!

[@mocococo2877]

A true mastership.

[@milleniummoses]

Hey Kev! We/I missed you, man! Glad to have you back. I thought you were gone because of the changes KZbin made that affected content creators. Thanks for yet another great tutorial. Never knew that "all" property existed. That makes life a lot easier.

[@KevinPowell]

Yeah, that 'all' can be really useful, just make sure to be careful with browser support on that one :). KZbin's changes for content creators didn't really affect me for whatever reason. Partially because the channel is growing, and partially because I'm such a niche topic, I think.

[@yuiyukinoshita6604]

I got so many good tricks from this one! I wanted to make a cool hover like that in my portfolio but ended up whit a mess! TYSM!

[@AtomoSato]

Incredible, really incredible, easy to follow, easy to understand and very well explained. As @Protoscribe said, I didn't know about the unset feature that it's very useful but until IE or EDGE didn't assume it's necessary to unset "by hand". Anyway, one of the better CSS trick explained and easy about a Nav bar. Congrats!

[@KevinPowell]

Very glad that you liked it Atomo! Sadly IE will never support unset, Microsoft has stopped development of it, other than security patches :\. Edge, on the other hand, is being pushed pretty hard, it's a good browser :). It should have support relatively soon I would guess.

[@mrfrontend1]

I start my day by watching your videos Kevin😜

[@rahxephon76]

Thanks for this vid, I was looking for something like this for a long time. You sir just got a new subscriber.

[@KevinPowell]

Awesome, glad it helped and thanks for the sub!

[@kkkkk943]

Thank you for this tutorial! New to web development, feel real great having KZbinr like u!

[@EmoryFlame]

This is pure gold! THANK YOU !!!!!

[@antonwimer3576]

you got all the moves bro, I like!

[@jdeso3]

I am really enjoying your videos, I especially like the fact that you make mistakes and typos just like the rest of us. Thanks for the videos.

[@KevinPowell]

Really glad to hear that you enjoy my approach Joe. I think it's important to show my mistakes, and how I figure them out and fix them (some of them anyway, I edit out the embarrassing stuff, lol).

[@CrashDSInc]

This is my first time watching one of your videos, and I subscribed right away. Good stuff! I appreciate how thoroughly you explain things. I'll be digging around the rest of your stuff in the future.

[@VideosofIrishFarmingLife]

Great video! What a cool trick the checkbox toggle in css is instead of having to use js.. Thanks alot

[@cringelord2823]

This is truly great, thank you so much friend, this youtube channel is everything

[@davidsuchan1641]

Oh my god! This tutorial is a gold mine! Thank you for this, now i really do know how to make mobile first with no js which is great! *subscribed*

[@fuzzypumpkin7743]

I had some issue when switching to mobile size. Background disappeared and toggle was only half showing. Perhaps it was due to not using the logo portion, not imposing a larger box size? I suspect that's it as I also had to add some padding and tweak to get the link hover effect to show. As it was, my nav is minimal and doesn't actually need a toggle on mobile, so I was still able to use a couple of bits. Just getting into using ::before and ::after and loving the examples of how pseudo-elements can be utilized.

[@KevinPowell]

Hrm, curious what caused that problem. Glad you got it sroted out for your case though!

[@marklong2133]

This was great. Thank you for creating this video. The only think I would like to see in addition to what you did here is to add subnav items and drop down icons using the same technique.