Create a responsive navigation nav with no JS!

My very first video that I published here is one on creating a navigation. It worked, it looks good, and it's insanely popular (by far my most popular video). The problem is, it isn't responsive and is a bit old school in that it uses floats.

***** An important note, I've edited the CodePen a few times since publishing this. One is to not use `all: unset;` which Edge doesn't support. Another edit, which I talk more about lower in the description, was to make it tab-able *****

In this video, I take that same navigation but I update it to take advantage of modern CSS, making it fixed top, adding a semi-transparent background, creating the dropdown without any javascript, using flexbox and CSS grid to lay it out, and changing up the pseudo-element transitions to be higher performance.

A commenter kindly pointed out that this isn't tabbable, which is an issue and causes accessibility issues. I've updated my CodePen to take this into account. Basically, I changed the 'display: none' on the input, which makes it almost useless, to instead have a position absolute on it and moved it way off screen. Then, I made it so when the input gains focus, the label gets highlighted to give us a visual clue as well. If you'd like to check it out, the codepen link is down below.

Timestamps
0:00 - introduction
3:15 - starting the markup
5:15 - starting the CSS
13:40 - creating the mobile toggle
23:55 - adding in the animation
31:20 - styling it for large screens
39:00 - adding the pseudo elements

Related videos

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[lindsayreiner]

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.

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

[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!

[clifhodges]

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)

[devinjansa]

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.

[lholland]

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!

[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 YouTube that I can find.
Much thanks to you, Kevin! really appreciate the video.

[boggeshzahim]

This is the best hamburger recipe on YouTube

[JulianColeman]

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

[Protoscribe]

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

[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! <3

[hugocsl]

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

[williamgreen]

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

[zanereeder]

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!

[parthparmar]

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

[banicans]

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

[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

[amirgheitasi]

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