Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

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

Dave Gray via YouTube

Start learning Write review
Coursera Ad

AI, Data Science & Cloud Certificates from Google, IBM & Meta

Learn More → Noble Desktop Ad

NY State-Licensed Certificates in Design, Coding & AI — Online

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This tutorial builds an animated hamburger icon and mobile menu for a responsive navbar with Tailwind CSS. It covers keyframes, responsive classes, menu behavior with JavaScript, and Tailwind class organization with Prettier.

Syllabus

Intro
Welcome
Overview & Starter Code
Small Changes to Project
Two Menu Versions
Build the Mobile Menu
Add keyframes and animations
Add a little JavaScript
Start Menu Version 2
Create a Hamburger Menu Icon
Arbitrary Values in Tailwind CSS
Extract Classes with @apply
Create the Hamburger Animation
VS Code: Disable Format on Save
Add One More Line of JS
Checking the Hamburger Animation
Future Tailwind CSS Topics
Organize Classes with Prettier

Taught by

Dave Gray

Reviews

Start your review of Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.