Adding an animated hamburger menu icon and responsive mobile menu is often the most challenging aspect of creating a basic website. In this tutorial, we look at how to do create both animated hamburger menu icon and responsive mobile menu with Tailwind CSS to complete our Acme Rockets website project. If you are just getting started with Tailwind CSS, I recommend going to the beginning of this playlist: th-cam.com/play/PL0Zuz27SZ-6M8znNpim8dRiICRrP5HPft.html
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.🥰
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.
Hi Dave, just a couple of notes : 1. at 24:40 I believe you can write it like this 2. at 30:30 I think tailwind will implicitly generate that role for us when we use after or before pseudo class
Hi Ahmad. Your #1 is what the docs show. I just specified the exact location of my html and js files. Your suggestion (and the docs) also work. #2 is good to know although it doesn't hurt to explicitly provide pseudo-element content. It is better I show it in a tutorial than skip over it.
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.
Yes, many possibilities! I did a couple examples of CSS only in my CSS for Beginners course: th-cam.com/video/n4R2E7O-Ngo/w-d-xo.html ..and the follow up bonus chapter reverses it: th-cam.com/video/VzkWH7mJpe8/w-d-xo.html
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?"
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 💯🚀
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
This is a good recommendation, and I agree that an aria-label here is a good idea. A button is a semantic element but adding a hamburger icon without a label does not help a screen reader. I do advocate for a11y and you may (or may not) have watched my other tutorials where I do so.
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.
@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.)
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!
Could you share the reasoning for referencing the JS folder in the tailwing.config? I saw another tutorial where the js was just in the build folder with no config reference and it worked. I tried it myself yesterday and it worked ok. Are there problems that may arise if we don't opoint tailwind to the JS folder?
Yes, I had hoped that I explained it clearly in the video. Tailwind needs to know the "contents" that it should scan. As I said in the video, if a class is being applied by Javascript that is not inside the HTML files, Tailwind will not know to add that class to the compiled "style.css" file unless you also have it scan the Javascript. Tailwind only includes the classes that it knows you are using. I hope this helps.
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
No, that is not good practice. If your team uses Tailwind, you need to stick with that. After you learn how to apply your own custom classes and animations with Tailwind, it is not going to slow you down.
@@DaveGrayTeachesCode since you suggested me in previous video comment section, that i should watch the whole series to get better at tailwind css, I watched it whole, and code along. What's the next effective step to build on own?
Hi Dave , amazing as usual i would like to share this nice VC extension named inline fold it helps you hide/show your tailwind classes, happy hacking 🥳
Hey Dave, I have an issue, can't figure out how to control the size of the HTML entities. I have text-3xl but is not working for me! 😕 Thanks, this is good stuff! 😉
Adding an animated hamburger menu icon and responsive mobile menu is often the most challenging aspect of creating a basic website. In this tutorial, we look at how to do create both animated hamburger menu icon and responsive mobile menu with Tailwind CSS to complete our Acme Rockets website project. If you are just getting started with Tailwind CSS, I recommend going to the beginning of this playlist: th-cam.com/play/PL0Zuz27SZ-6M8znNpim8dRiICRrP5HPft.html
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.🥰
Absolutely! 🚀
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.
Hi Dave, just a couple of notes :
1. at 24:40 I believe you can write it like this
2. at 30:30 I think tailwind will implicitly generate that role for us when we use after or before pseudo class
Hi Ahmad. Your #1 is what the docs show. I just specified the exact location of my html and js files. Your suggestion (and the docs) also work. #2 is good to know although it doesn't hurt to explicitly provide pseudo-element content. It is better I show it in a tutorial than skip over it.
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.
Yes, many possibilities! I did a couple examples of CSS only in my CSS for Beginners course: th-cam.com/video/n4R2E7O-Ngo/w-d-xo.html ..and the follow up bonus chapter reverses it: th-cam.com/video/VzkWH7mJpe8/w-d-xo.html
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.
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?"
Love all your lectures!!
Thanks so much!
brother, i am really indebt on you. thanks for giving us such content.
Great tutorial! specially to those devs that are focusing on UI, thanks sir!
Glad it was helpful!
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.
what If I would like to add a smooth animation to the menu when closing? I'm trying but cant get good results :(
Sir, Thank You very much. I waiting this lesson. 🥰. You're no.1.
You're welcome!
Thank you for uploading this tutorial 😊
You're welcome!
I've learned a lot! Thank you so much!!!
Happy to help!
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 💯🚀
Thanks Ahmad! 💯
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
This is a good recommendation, and I agree that an aria-label here is a good idea. A button is a semantic element but adding a hamburger icon without a label does not help a screen reader. I do advocate for a11y and you may (or may not) have watched my other tutorials where I do so.
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.
Thank you, Dave
Welcome!
Amazing tutorial thank you very much
You are welcome!
hey sir, i can't apply the prettier. after run the command 'npx prettier --write ./build/*html' it said that the file unchanged. how can i fix it?
oh. i have resolved it by adding the .prettierc file. thanks a lot.
@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.)
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!
Noted! Thanks!
thanks a lot Sir..
hi Dave, I add [&>div]:rotate-[720deg] for the hamburger menu rotation animation but seem is not working? do you know why?
Impossible for me to know about your code from here. Please compare it to the code I provide in the course resources.
@@DaveGrayTeachesCode okok thanks for replying🙏
I doubled check all the code but the toggle-btn [&>div]:rotate-[720deg] is still not working.
Could you share the reasoning for referencing the JS folder in the tailwing.config? I saw another tutorial where the js was just in the build folder with no config reference and it worked. I tried it myself yesterday and it worked ok. Are there problems that may arise if we don't opoint tailwind to the JS folder?
Yes, I had hoped that I explained it clearly in the video. Tailwind needs to know the "contents" that it should scan. As I said in the video, if a class is being applied by Javascript that is not inside the HTML files, Tailwind will not know to add that class to the compiled "style.css" file unless you also have it scan the Javascript. Tailwind only includes the classes that it knows you are using. I hope this helps.
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
No, that is not good practice. If your team uses Tailwind, you need to stick with that. After you learn how to apply your own custom classes and animations with Tailwind, it is not going to slow you down.
How long this tailwind css series gonna be?
Almost complete.
@@DaveGrayTeachesCode since you suggested me in previous video comment section, that i should watch the whole series to get better at tailwind css, I watched it whole, and code along.
What's the next effective step to build on own?
@@Sky-yy I suggest taking a project you have and converting it to Tailwind next.
@@DaveGrayTeachesCode thanks Dave, will do that.
Can you share some Vue3 projects
Thank you for the request!
why don't you just use an ID and add that before stuff in css it would be easier
Thanks Bro
Welcome!
Thanks sir
Welcome!
Hi Dave , amazing as usual i would like to share this nice VC extension named inline fold it helps you hide/show your tailwind classes, happy hacking 🥳
Yes, a great extension that was introduced in Lesson 1 of this series. I prefer to show all classes during the tutorials though. Thanks!
Hey Dave, I have an issue, can't figure out how to control the size of the HTML entities. I have text-3xl but is not working for me! 😕 Thanks, this is good stuff! 😉
You can control the font-size of html entities like any other text. If in the ::before or ::after pseudo-classes, you will need to set it there.
@@DaveGrayTeachesCode My mistake! I forgot to set up a bigger fontSize in the config. Thanks.