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.
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.
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!
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?
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 TH-cam that I can find. Much thanks to you, Kevin! really appreciate the video.
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)
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 :-)
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.
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!
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
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!
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!
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.
Echoing previous comments…thank you Kevin for all you videos, but especially this one. Maybe my favorite of any other TH-cam css/html tutorials. Note to anyone wanting to build a website: let this video be the first thing you watch!
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!
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.
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
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.
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.
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.
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?
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?
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!
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.
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!!!
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?
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...
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.
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
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!!
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!
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.
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!
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.
This is gold! I would like to suggest 2 things that may be worth revisiting on a redux of this video: 1) at the responsive design's breaking point, if the menu's checkbosx is set to hidden, the menu unfolds, then hides itself quickly. It is a bit of a nitpick, but the menu flashing and hiding is a little bit annoying (customers may complain) 2) Would it be possible to have this idea double-down on itself, and have submenus that show/hide with no javascript and are animated as well, without having to write CSS for each individual submenu?
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.
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).
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!!
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!
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.
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!
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!
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.
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.
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.
So at 31:26, the application of burger (drawer) menu is left aside for the media query technique, not as a continuation of a single tutorial. Friendly feedback: Indicate that those are two different types of presentations, otherwise it may appear confusing or misleading that the burger menu animation will be supplementary to the media query technique.
Hey Kev! We/I missed you, man! Glad to have you back. I thought you were gone because of the changes TH-cam made that affected content creators. Thanks for yet another great tutorial. Never knew that "all" property existed. That makes life a lot easier.
Yeah, that 'all' can be really useful, just make sure to be careful with browser support on that one :). TH-cam'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.
Awesome tutorial, it's given me understanding of how things work. Thank you very much, Kevin, for your cool stuff on youtube. Your explanations always rock!
What puzzles me about the menu icon is this: as far as I can tell there is no way to handle the event of tapping a link with just css! My newb understanding is that the checkbox cannot be unchecked (on an event) in any way using strictly css. I would expect the menu to disappear when a link is tapped. If it's a totally different page that loads, it's a non-issue, but for internal links, you would be forced to tap the icon again to hide the menu. So I think some javascript is needed to handle this unless there is a way I am not aware of. BUT....overall I learned a ton from this video (and your others). I am definitely making some progress following along. Each time I build a site I am more comfortable and have to peek back at how you did it less and less. Thank you!
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.
First off this is a great tutorial, you have a pleasing voice which helps!! My problem seems to be browser compatibility. I'm coming back to web design after a 20 year gap & CSS to me is just such a bloody pain, used to be you could just center a table, align it's padding & pop your content in it. I got to around 16 minutes on your video & then noticed the beginnings of browser incompatability. So I then cheated, copied all your code from code pen into Dreamweaver & now, Edge displayes your content here next to the Logo. IE doesn't show the green background. Firefox & Chrome work fine. Mmm a Microsoft issue then... Anyway thanks, keep up the good work.
I did a few things in this one that IE doesn't like at all. You can get grid to work in IE with autoprefixer, but it requires a bit of a specific approach. Browser support is much better now than it used to be! Though there are a few issues with some of the newer specifications that are coming out, we are in a bit of a golden age compared to the last 10-15 years where at times it was a literal nightmare. So you skipped out on the worst of it!
alright after seeing all this great feedback you get from your viewers and watching a couple of videos I decided to subscribe. I feel like there are tons of front-end development tutorials on youtube, but I keep seeing some flaws in their code whereas in the case of your videos everything is top-notch. I feel like it's the best way to write code
Thanks so much Dan, that means a lot to me! I try my best to make sure I'm doing things the right way in my videos, so I'm glad to hear the positive feedback. I do occasionally make mistakes (the codepen for this video has a few changes for browser support and accesiblitiy, for example), but I try hard to give the best advice I can :)
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!
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
Hey Kevin. Just wanted to say that your videos are awesome and as a token of my gratitude and appreciation for all the hard work that you put in making these free videos for people like us I have signed up as a supporter of your channel at Patreon :D You sure as hell deserve more subscribers.
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.
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).
Great video! One thing that bothered me was the lack of contrast between the white text and green background. Something darker would've been easier to see.
I cannot thank you enough Kevin. Your videos have been transformative in my current learning process in college; my drive is back! I can watch and re-watch a video for an hour or two and feel I get a better understanding of how it all works better than any textbook reading or lecture video. You make it look easy while clearly explaining the areas that one may get stuck on. Keep it up! :)
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!
Hi Kevin. Another great video, and one that was worth waiting for while you've been busy, thank you. This video was a nice follow up to your other tutorial, "Build a responsive navigation with CSS and jQuery - with a bonus dropdown effect using CSS clip-path". Regarding video suggestions - I'm not sure if you've already done a video on this but it would be great if you did a video on your background in design and print, how you got into/transitioned into the code/development side of things etc. On your website you mention you teach in the classroom, it would be nice if you could mention what you do in regards to teaching too. If you have done a video on this already, my apologies, I haven't looked/found it yet. Cheers!
By the way, the Grid layout feeature in Firefox is great, it would be nice to see this in Chrome too. I've been using a free extension called Pesticide for looking at layouts. It pretty handy for visualising grids.
Thanks for the suggestion revillsimon. I've mentioned it quickly in videos before, but I've never really done a dive into it. You've given me something to think about :) As for the Grid feature in Firefox, I 100% agree. At the moment, Firefox has the best dev tools bar none, which is probably aided by having Jen Simmons on their team giving a ton of input towards the dev tools there. I use Chrome as my day-to-day browser, but Firefox has become my dev browser.
This channel is a gem on youtube ....
Thanks so much 😊
Yeah I agree my favourite web based channel and I sub to a few.
lost devtips but found kevin so i'm glad
couldn't agree more haha
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.
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!!
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.
Thanks for the very kind words Louis! I'm glad that you're enjoying my content :D
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.
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.
@@ItsSunnyMonster With Wix, you are not building a web site but adding to their product. A Wix site is not portable, in the slightest.
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!
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
@@KevinPowell I'm with that guy Kevin. Really well done!
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?
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 TH-cam that I can find.
Much thanks to you, Kevin! really appreciate the video.
Really glad you liked it!
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)
2019 is 3d, can we makethe hamburger as an object in space with shadow and animate/transform ? / Thanks for the tutorial m8 ur great !
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 :-)
Can also just use this instead: ☰
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.
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!
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
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!
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!
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.
Was definitely worth the watch. Did not know of unset all thing.
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.
It is indeed a neat feature. I am sure to pay more attention to CSS and HTML docs from here on in.
Kevin Powell how do I subscribe to your newsletter?
I did not see the link
Echoing previous comments…thank you Kevin for all you videos, but especially this one. Maybe my favorite of any other TH-cam css/html tutorials. Note to anyone wanting to build a website: let this video be the first thing you watch!
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!
Glad you enjoyed the video, and my approach, and thanks a lot for subbing :)
We want more long and in-depth videos. I'll watch it until the very end.
This is the best hamburger recipe on TH-cam
Haha 😂
I thought I was pretty good at CSS, then I started watching your videos! LOL. Great stuff Kevin!
And the new propert of the week goes to "all:unset" thats so cool!
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.
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.
@@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 😂
@@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.
@@holdencn I would believe it, but... it hurts to hear :(
This was actually the simplest tutorial on nav bar animations I’ve ever seen❤❤❤❤❤❤❤🎉🎉🎉🎉. You’ve really helped me a lot😊
First time I’m commenting on a TH-cam video❤. I just had to
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
every time i get here on Kevin's channel, i learn something new about CSS.
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.
Very glad you're liking my videos Begichh!
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
Thanks! This really helped. I just made my first website and I don't know JS yet.
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.
That's one of the most useful tutorials I've seen in a long time. A thousand Thanks Kevin. You're awesome
So happy to hear that Amir!
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.
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?
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?
stop over complaining. but something like in media queries use that section display:none ?
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!
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.
Thank you, Kevin, for such a powerful, lesson.
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!!!
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?
+1
add new ul and give it a different class, display:block,position: relative/absolute respectively, style them and so on.
Hi Kevin! Thanks a lot, great content! Just a question... is there anyway to collapse the navbar after clicking the desired link??
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...
Hi! I have the same question... and I was wondering if you managed to do it, without JS. Thanks! ;)
This channel is like an island with the treasures in form of CSS lessons. Great job Kev 🔥🔥🔥🔥🔥
Havent watched it yet but excited for a css grid video with nav as i have been struggling with it!
I hope it met your expectations!
the transition: transform 400ms ease-in-out; is super clean!!!!!
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.
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
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
we did miss you ;)
Awww thanks 😊 I missed you guys too
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!!
Thanks Marco :)
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!
Thank you so much Derek, really glad that you're enjyoing my videos :D
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.
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.
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!
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.
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 :)
This is gold!
I would like to suggest 2 things that may be worth revisiting on a redux of this video:
1) at the responsive design's breaking point, if the menu's checkbosx is set to hidden, the menu unfolds, then hides itself quickly. It is a bit of a nitpick, but the menu flashing and hiding is a little bit annoying (customers may complain)
2) Would it be possible to have this idea double-down on itself, and have submenus that show/hide with no javascript and are animated as well, without having to write CSS for each individual submenu?
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.
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).
Even old videos are gold. Thanks Kevin, I really meant it!
Loved the smooth explanation of each and every code. You have got a new subscriber.
Glad you liked it enough to sub, welcome aboard!
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!!
This tutorial is 2 year's old, but still is a very good. Kevin, you are great!
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.
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
Always nice when things are timed perfectly for someone, glad it helped Mathias :)
Thank you so much, I love your videos and look forward to them. I’ve learned so much from watching you!!!
Thank you. First time I’m seeing navbar with no JS
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!
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.
Your first video appeared in my feed and after a refresh this one did. What nostalgia Kev!
Haha, that's awesome!
Amazing! You showed me how to simplify a lot of things that've been taking me a lot of work. Thank you!
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!
What a useful video. I think I learned more in the last hour than I learned in the last month about CSS.
Awesome, so glad :D
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!
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.
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.
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.
This is my leading CSS learning site, well done.
Every second of this video is worth watching. Thanks a lot Kevin :-)
So at 31:26, the application of burger (drawer) menu is left aside for the media query technique, not as a continuation of a single tutorial. Friendly feedback: Indicate that those are two different types of presentations, otherwise it may appear confusing or misleading that the burger menu animation will be supplementary to the media query technique.
It's cool how much you can actually do with css. Although this is a limited approach, it is highly performative.
Hey Kev! We/I missed you, man! Glad to have you back. I thought you were gone because of the changes TH-cam made that affected content creators.
Thanks for yet another great tutorial. Never knew that "all" property existed. That makes life a lot easier.
Yeah, that 'all' can be really useful, just make sure to be careful with browser support on that one :).
TH-cam'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.
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
You're my favorite TH-camr who teaches coding :D
Awesome tutorial, it's given me understanding of how things work. Thank you very much, Kevin, for your cool stuff on youtube. Your explanations always rock!
I think you made me enthusiastic about CSS animations in.. Forever! What an awesome video :)
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!
What puzzles me about the menu icon is this: as far as I can tell there is no way to handle the event of tapping a link with just css! My newb understanding is that the checkbox cannot be unchecked (on an event) in any way using strictly css. I would expect the menu to disappear when a link is tapped. If it's a totally different page that loads, it's a non-issue, but for internal links, you would be forced to tap the icon again to hide the menu. So I think some javascript is needed to handle this unless there is a way I am not aware of.
BUT....overall I learned a ton from this video (and your others). I am definitely making some progress following along. Each time I build a site I am more comfortable and have to peek back at how you did it less and less. Thank you!
Probably one of the best tutorials so far! So many things to learn!!
Thanks Abhishek, so glad you liked it
Great video! What a cool trick the checkbox toggle in css is instead of having to use js.. Thanks alot
This is very good for my school project haha. Amazing work. Love your videoes.
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.
Hrm, curious what caused that problem. Glad you got it sroted out for your case though!
First off this is a great tutorial, you have a pleasing voice which helps!!
My problem seems to be browser compatibility. I'm coming back to web design after a 20 year gap & CSS to me is just such a bloody pain, used to be you could just center a table, align it's padding & pop your content in it.
I got to around 16 minutes on your video & then noticed the beginnings of browser incompatability. So I then cheated, copied all your code from code pen into Dreamweaver & now, Edge displayes your content here next to the Logo. IE doesn't show the green background. Firefox & Chrome work fine. Mmm a Microsoft issue then...
Anyway thanks, keep up the good work.
I did a few things in this one that IE doesn't like at all. You can get grid to work in IE with autoprefixer, but it requires a bit of a specific approach.
Browser support is much better now than it used to be! Though there are a few issues with some of the newer specifications that are coming out, we are in a bit of a golden age compared to the last 10-15 years where at times it was a literal nightmare. So you skipped out on the worst of it!
alright after seeing all this great feedback you get from your viewers and watching a couple of videos I decided to subscribe. I feel like there are tons of front-end development tutorials on youtube, but I keep seeing some flaws in their code whereas in the case of your videos everything is top-notch. I feel like it's the best way to write code
Thanks so much Dan, that means a lot to me! I try my best to make sure I'm doing things the right way in my videos, so I'm glad to hear the positive feedback. I do occasionally make mistakes (the codepen for this video has a few changes for browser support and accesiblitiy, for example), but I try hard to give the best advice I can :)
After trying to make a nav with CSS grid this legend shows me the way, great video Kevin
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!
Thank you for this tutorial! New to web development, feel real great having TH-camr like u!
Best Channel to Learn. High Quality Content. Thanks Kevin :)
I do not believe what i'm seeing. As a french guy who speaks good english (thanks mum), i can just say, merci mon pote, tu es sacré codeur!
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
Hey Kevin. Just wanted to say that your videos are awesome and as a token of my gratitude and appreciation for all the hard work that you put in making these free videos for people like us I have signed up as a supporter of your channel at Patreon :D You sure as hell deserve more subscribers.
Amazing, thank you so much Kiran! I really appreciate it :)
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! 💪
Thanks so much Antti, glad you're liking my content!
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.
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.
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).
Great video! One thing that bothered me was the lack of contrast between the white text and green background. Something darker would've been easier to see.
Great Video! I love all yiour videos! The way you explain things makes it so simple to understand!
I read the description, and edge now does support all:unset; 🥳
I cannot thank you enough Kevin. Your videos have been transformative in my current learning process in college; my drive is back! I can watch and re-watch a video for an hour or two and feel I get a better understanding of how it all works better than any textbook reading or lecture video. You make it look easy while clearly explaining the areas that one may get stuck on. Keep it up! :)
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!
Great video. Learned some new stuff and found a new rabbit hole to go down. Thank you!
Hi Kevin. Another great video, and one that was worth waiting for while you've been busy, thank you. This video was a nice follow up to your other tutorial, "Build a responsive navigation with CSS and jQuery - with a bonus dropdown effect using CSS clip-path". Regarding video suggestions - I'm not sure if you've already done a video on this but it would be great if you did a video on your background in design and print, how you got into/transitioned into the code/development side of things etc. On your website you mention you teach in the classroom, it would be nice if you could mention what you do in regards to teaching too. If you have done a video on this already, my apologies, I haven't looked/found it yet. Cheers!
By the way, the Grid layout feeature in Firefox is great, it would be nice to see this in Chrome too. I've been using a free extension called Pesticide for looking at layouts. It pretty handy for visualising grids.
Thanks for the suggestion revillsimon. I've mentioned it quickly in videos before, but I've never really done a dive into it. You've given me something to think about :)
As for the Grid feature in Firefox, I 100% agree. At the moment, Firefox has the best dev tools bar none, which is probably aided by having Jen Simmons on their team giving a ton of input towards the dev tools there. I use Chrome as my day-to-day browser, but Firefox has become my dev browser.