Responsive navbar tutorial using HTML CSS & JS

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:23 - What we are starting with
03:38 - The flex utility class I am using
04:48 - Basic styling to get started
06:41 - The bold numbers
09:56 - Setting up the mobile version
14:50 - The blurry background effect
16:32 - Dealing with browser support for backdrop-filter
19:01 - Modifying the spacing with gap
20:49 - Adding the button to open and close the menu
24:36 - Styling the button
28: 16 - Making the button work - adding the functionality
41:48 - Styling the nav at larger screen sizes

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[spacemanstrikesagain]

I found the Hamburger mobile navigation menu tough to grasp. I read multiple articles, played around with codepens, watched videos etc. This is the only video that explained the whole thing in a truly beginner friendly way. And I appreciate the effort that you put into it Mr. Powell. Kudos and millions of thanks ❤❤

[digitalalien]

I just finished the full course on scrimba and it was GREAT. A ton of information on proper workflow and good practices, and lots of pointers on useful things I need to learn more about. I've been trying to get better at building complete websites (instead of small challenges like hovercards etc) and learn some JS along the way, and I was a little overwhelmed and sometimes felt lost as to where to start and what's important. But with this course the picture became much clearer. It was exactly what I needed, so thank you!

[aakashkathait]

I just completed you “conquering responsive layout” course, it changed my mind completely on how I see html and css. Thank you for such quality content for free

[CodeWithSahand]

The Navbar looks amazing. I like the idea.

[mrCetus]

This is so well explained. Love that you cover so many newer css properties, logical properties as well as best practices like aria. This is quality education.

[aymenfyi]

kevin, can't thank you enough for all the invaluable content you're consistently giving us. learning so much and enjoying every step along the way! ♥

[SirMika]

That's so cool that you take your time and explain things well like with a friend. Really enjoyable to watch.

[davidtaylorgarcia]

Certainly you are as good as a web-dev-youtuber can be. Your clarifications are awesome, your content is incredibly well structured, even your voice tone gets on really well with the content. Thx a lot!

[dannyr]

Another great video! The site design and navigation looks so clean, I love it! Always learn a lot from watching your examples so thank you so much!

[perkin]

Oh Yes! What an excellent tutorial - you were on top form for this one Kevin. So helpful to see modern CSS rules in actual use cases like this where you can not only see how they work but also how they save time and effort.

[Pavel-wjgy]

Sometimes I get to do navbar, footer or any kind of layout components that I forget how to do. On those days, I come to Kevin Powell channel for ideas and you never disappoint! Truly a joy to watch someone as fascinated by CSS as you.

[Anth-ony]

Great video. I know you're the "CSS King", however, may I suggest that you create some very basic JS tutorials on the most common use-cases of said code? I've learned more about the basics of JS from you, as you touch on it in your videos, and how to implement them in my own projects than I have from people actually teaching straight up JS. You're very concise in how you create/explain those sections in your videos and I'm sure others would enjoy this as much as I would. Plus, it would be a bit of a change up for you to keep things fresh. Anyway, keep it up Kevin, you're one of my favourite YouTuber!

[oszbwob]

This man is pure gold. The sheer number of informative videos on CSS instead of just blabbering is insane. Get this man a subscription.

[ZANES-YT]

This guy us one of the best content based programming markup language course tutor ever, so much valuable content in the last 3 years from you thanks for helping me being the css designer I am now.

[trentturner]

Thanks for this tutorial Kevin. I’ve been watching you for a while and always enjoy learning from and watching you. This one helped me switch my default mobile navigation to use translate x instead of animating the left and right properties to show and hide my menus. A much better way of doing it. Thanks again.

[steff]

Dude...i watch your videos for almost 1 year now. This is my first comm and I wanted to say that I just LOVE THE WAY YOU TALK.

[Petahsaur]

Perfect timing Kevin,
Just as I started to look into navbars and js last 2-3 days

Thanks!

[markdecilio]

i really like how you explain the details in a simple and understandable way! great tutorial Big Thanks

[nicolasnog]

Great video, you are inspiring me to get in more depth touch and play around with CSS instead of using already done templates for my projects!

[cemrekur]

Great video, only problem that you may come across, you should also put visibility:hidden to nav-links to avoid tabbing over the screen and also to get around transition issues adding simple delay to transform can do the trick!