Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS

Create an Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS. In this tutorial, we will create an animated hamburger icon and an animated mobile menu with Tailwind CSS and add them to our responsive navbar.

🚀 Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS

(00:00) Intro
(00:05) Welcome
(00:17) Overview & Starter Code
(01:23) Small Changes to Project
(04:03) Two Menu Versions
(05:19) Build the Mobile Menu
(14:12) Add keyframes and animations
(18:25) Add a little JavaScript
(26:14) Start Menu Version 2
(28:43) Create a Hamburger Menu Icon
(34:59) Arbitrary Values in Tailwind CSS
(36:04) Extract Classes with @apply
(37:54) Create the Hamburger Animation
(41:12) VS Code: Disable Format on Save
(42:12) Add One More Line of JS
(42:43) Checking the Hamburger Animation
(44:12) Future Tailwind CSS Topics
(44:40) Organize Classes with Prettier

📚 Suggested Pre-requisites for this Tailwind CSS course:

📚 Tutorial References:

⚙ Web Dev Tools:

Was this tutorial about creating an animated hamburger icon and mobile menu in Tailwind CSS helpful? If so, please share. Let me know your thoughts in the comments.

#tailwindcss #hamburger #icon

[utinthein]

Sir, I will not forget your words (keep striving for progress over perfection and a little progress everyday will go go a very long way.) Thanks you very much indeed, Sir.🥰

[stroiman.development]

That was just awesome, thanks a lot mate. Been a web developer for, I don't know how long. Developer in total for 25+ years. Needed to rebuild my own web site, and found that to be an excellent reason to get a grasp of tailwind now that it gets so much attention. Your series was everything I needed :) Know I know tailwind.

[adeleke]

Your videos are always packed with helpful insight. By watching this one in particular, I was able to create the mobile menu I needed. Thank you Dave.

[TommyAlanRaines]

This is cool, I actually did a Hamburger Menu were it spins into an X as well, however it also has a pulsing ring around the Hamburger in non clicked state, when the menu is open its translucent. Its also all CSS; the code still needs a little more work- however no JavaScript.

[ahmad-murery]

I liked the way Tailwind configurations work,
The arbitrary values are very useful as we often need to tweak default presets a little bit,
I hope at the end of this series that you can dedicate one or more videos just for configurations / customization,
Still the same vanilla css/js guy for various reasons (poor memory), but if I had to choose between Bootstrap and Tailwind I'd go with the later.

Thanks Dave 💯🚀

[big-jo]

Hi Dave, just a couple of notes :
1. at 24:40 I believe you can write it like this <./build/**/*.{html, js}>
2. at 30:30 I think tailwind will implicitly generate that role for us <before: content-[ ' ' ]> when we use after or before pseudo class

[afrikito]

brother, i am really indebt on you. thanks for giving us such content.

[jq_dev]

Great tutorial! specially to those devs that are focusing on UI, thanks sir!

[cosgravehill]

For anyone who wasn't getting hamburger-btn animation to work at all:

stop running Tailwind with 'ctrl c' in terminal and then run it again.
For some reason both times I've tried to reference input.css file so far in this tutorial, i've had to restart Tailwind. Probably an obvious fix, but my first tailwind project, and really first time using a node.js dev environment.

"Have you tried turning it off and on again?"

[utinthein]

Sir, Thank You very much. I waiting this lesson. 🥰. You're no.1.

[ririyan]

Thank you for uploading this tutorial 😊

[bLitzKinG]

I've learned a lot! Thank you so much!!!

[Ismoil_Sharifov]

sometimes you forget to scroll for more space to move the working area to the middle and then write code - you simply write code down there, which is really a discomfort to follow since youtube video navigation covers the code on pause! Otherwise, I like your videos - they are great!

[marcindomanski]

33:23
Think with semantic, not visualization. Blind person with reader will not know what this button do. I thikk that you should add text hide with css or aria-label

[ravvmusic]

Hey dave, thanks a lot for the tutorial. I’ve been working on a navbar which has sub menus triggered on hover for a few li items and i cant seem to make it appear on mobile view.

[gnupungo]

When I try to sort with prettier and check the md:hidden class it doesnt seem to do anything? I have everything set up as you have, I think.

[cosgravehill]

@DaveGrayTeachesCode - Great Tut! Thanks!!
General Questions - Still uncertain why some code goes in either input.css / main.js / tailwind.config.js / directly in html.

For example - I wouldn't be able to realize on my own that .toggle-btn { @apply ... } should exist in input.css . I'd probably try to jam it in main.js or config.js, but I'm still too much a novice to work backward to answer this one myself(If it didn't work, there could be 1, 000 reasons why, lol.)

Could the essence of that code functionality exist in a different file?
In general, how do we know when to reference input.css? ( I have the vague feeling that the things in input.css are more "css-ish" than what should go in main.js, but tailwind.config.js seems it could be just as intuitive a destination for me at this point.)

[matteonegridev]

what If I would like to add a smooth animation to the menu when closing? I'm trying but cant get good results :(

[Bayans]

Hi Dave,
thank you very much for this great tutorial, one question: is it a good practice to use both pure css file as well as tailwind, cause I think animation is much easier using traditional css

[queenb_]

hi Dave, I add [&>div]:rotate-[720deg] for the hamburger menu rotation animation but seem is not working? do you know why?