Building Tailwind CSS Navbars - Mobile Navigation Too!

hey there this is chris sev from better dev in today's tailwind video we're doing a lot of tailwind videos i've gotten a lot of requests for building out a navbar with tailwind so here on better.dev you can see that this logo on the left side we have two links here and a call to action button this is a pretty simple navigation but we're going to take this concept we're going to build it out in codepen and i'm going to show you how to make tailwind navigation bars so here i'm going to go into codepen brand new codepen and let's call this tailwind navbar and we'll save it and i'm going to change the view here i know we usually do a content html css javascript on the left i'm going to change it to be top down and that's because for these nav bars we want to have like the full width of the browser so i'm going to go into css down here add in tailwind save and close and i'll close that css in javascript since we don't need them okay so before we start i want to talk overall about the strategies that you're going to use for nav bars so to start us off i know we usually do like a giant div and center everything but that's not going to work for this one since we're doing a navigation bar so i am going to write out some comments we're going to say nav bar goes here content goes here and then inside of the nav bar we're usually going to have a logo primary nav secondary nav and then we're gonna have the mobile menu so yes we're gonna do mobile in this video as well so it may end up being a little longer than our usual 10 12 minute video to start us off let's just go ahead and get rid of the content section we're going to go padding y of 32 let's just give it a an h2 inside of here and we're going to say font extra bold text is 6xl and the text is going to say navbars in tailwind and let's also text center there and i'll drop to 4xl we don't need too much there okay so next up let's start working on the nav bar so i'm going to wrap everything in the nav html element here and that'll be good enough for our navbar and i want to show you overall the main strategy that we're going to use for navbars normally your navbar you don't want it to be the full width so we're going to go in here and we're going to say div class is max width is maybe 7 xl and then we're going to close this out all the way down here and maybe i'll move mel mobile menu down here because we might mess with that a little later okay so the thing about this is let's say i wanted to see this let's go border border red at 400 the console log of css you can see that it's right there next up let's make sure that this is centered mx auto so that's margin left auto margin right auto so now it's going to go center of the entire thing and then let's give our nav a background let's go background as black just to see it now it's really hard to see anything that's happening because we don't have content so we could either set height and width on these divs and nav or we could actually just create content so i'm going to go here i'm going to say div logo i'm going to say div primary nav and the reason that we're doing it this way secondary nav i don't want to build out all the a tags just yet i want to show you the overall strategy so that you can take this technique and use it on your own nav bars i don't really want to force you into a certain way of doing these things but i like to show you the strategy here so here if the logo is here and actually let's change this out from background black to background gray at 100. okay so we have the logo the primary nav the secondary nav let's see if we are able to shrink this i think it's maybe too large is the problem there we go so max with 5xl since i am so zoomed in when i record these 7xl was too wide for the screen so 5xl here is going to be able to show us a limit on the edges so for your desktop sizes you can do 6xl 7xl or you could totally just get rid of that and say on the div right here we can just say padding x of maybe eight so that's how you can get a really wide container for your nav or if you wanted to constrict the size and do an actual width you could say max width is maybe 6xl so those are two strategies there for the width of the nav bar one is padding on each side and that's kind of like a full width nav bar and the other is restricting the width and you could also do that responsibly as far as full width nav bar on smaller screens and then you can say max width on larger screens and you could do that by like prefixing excel and i've got a video on responsiveness in tailwind if you want to check that out so we'll start here now the strategy here is we have our overall nav we have our internal div which is the containment div and then i'm going to wrap everything else in another div and i know we're getting into devitis but i really like being explicit about what each one does so here we are going to wrap this with a class flex and class flex is basically going to say hey you logo primary nav secondary nav you all sit side by side of each other because flexbox says all of the children divs right here are gonna sit side by side so next up we're gonna use the justify classes in tailwind to specify where everything goes so if we said justify between then you would see this spacing so you would see that the logo pushes left the primary nav pushes to the middle secondary nav pushes to the right and the cool thing about this is you can change all of this out just with this justify class so if i said justify center everything would get pushed to the center you could say justify around and that would center if these in the three areas right there so you also get spacing on the left and the right of the edges you could do justify between again and then let me show you how to group the logo and the primary nav so that these two sit on the left and secondary nav sits on the right you could wrap the logo and the primary nav in a div and by doing so these are now one child element the secondary nav is one child element and now these are going to sit far left and far right but then you would do class flex on this to get those to sit side by side and that's kind of the strategy we're going to use here we're going to have a nav for the background we're going to have a div for the containment area we're going to have a div to flex and space and then we're going to have a left side right here and then a right side right here so that's our overall strategy i like how this is looking already so all we have to do here is start styling out all of these things so let's go for the a right here so i'm going to say a let's do an href is hashtag just the placeholder real quick and then we're going to say close out this a tag and i'm actually going to go to hero icons and then bring in a icon that i kind of like let's just scroll down and randomly pick a lot of fun and i've got a video on hero icons too if you want to check that out let's go for the paper airplane so i'll copy svg there tell the navbar paste that in and then right next to that i'm going to say span is better dev there we go so on this svg let's make sure that we do height is maybe six that might be too large that's okay and width is six just to set that up correctly on this a-tag we want the logo and the text right here uh oh we want the text right here to sit side by side so i'm going to say class is flex and you'll see that flex is used a lot in nav bars now i want this logo and this text to sit in the line on the middle so i'm going to say items center and that vertically centers them right there perfect all right next up let's say that this logo and the primary nav next to it needs some spacing so you could potentially go to the logo and say class margin right of four a better way that i like to do this is to just go to the flex and say space x is four so that's spacing in between those two and i've got a video on space x classes as well okay so now we have our logo let's add some margin to the svg right here you could do it on the parent as well and do space x but since it's only these two that we're sure is going to stay this way i'm going to say margin right of maybe three let's drop that down to two perfect all right so the primary nav is gonna need some content now so let's do maybe like two a tags a times two right here and then let's say um features and right here let's go for pricing perfect but the thing is here we need these to sit on the center axis so i'm going to go ahead and say class flex items center again and then we need some spacing between them space x of three okay now you can see that they're kind of bunched up to the top and bottom of this nav so let's go to each of these a tags right here a right here on this and then the a tag right here oh well let's add classes here so i'm going to choose those two add right here and say padding y of 2 heading x of 3 and that gives them a little bit more spacing and the black is kind of a jarring color so let's go for text gray at maybe 700. that may be too light but actually that's not bad that looks pretty decent right there and i think our spacing is a little bit too much so let's drop that down to maybe two and then our space x on this one needs to just drop down to one okay so the other thing here is let's increase the padding y here padding y padding y and padding y let's do three on that so we can get a little bit of a thicker nav bar and then let's go over here and get rid of this ugly border red because that's not doing us any favors okay so there we go we have our logo we have our a tag here a tag here so it's looking a little bit better let's see if we can't make it look a lot better so i'm going to take these py3s up to py4 a little bit more spacing you usually want to use more than you think you're going to need and then you can come down from there but starting high is a good policy on padding i'm going to put my little hashtags in there so we have features and pricing we have better dev right here we can change out the color on this to say text color is maybe blue or sorry text blue at 400 there we go and then let's drop that margin right down to one because it is a little bit too far i think cool all right so a little bit better i'm even gonna push this the padding y5 maybe five cool so that's decent enough right there on the secondary nav let's take the a tags right here oh and i want to actually address a question that is probably coming up already in your brains is why is chris not using ul and li and ol and li so i used to think that navigation should be list items and that could still be true right like a lot of people do that and it is considered best practice actually went to google.com the other day and if you inspect their navbar at the top you can see that they're just using a tags there's no uls lis or anything like that so if google is doing it i consider it okay to just follow suit and let's check these footers here yep they're just eight tags a tag a tag so no allies no extra html no extra styling of those so i'll just go ahead and follow along with google and say let's leave those out all right secondary nav let's just copy these two right here actually you know what let's start our own a times two and then i'm gonna go here and we're gonna say login and we're gonna say sign up okay so let's do the same thing class is flex item center just to get them to sit in the same plane as these two right here and then let's go for space x of maybe three what did we use for the top one spacex one okay so let's keep spacex one and the reason we went so low is because each of these is going to get their own padding so let's go class and let's say right here padding y a five padding x of three padding y five padding x of three but the sign up button we want to look a little bit cooler than the other buttons right we usually want this top right one to have a big call to action we want you to focus on it and click on it so let's go for background is yellow at maybe 400 and text is yellow at maybe 800 cool so let's go for rounded right there let's bump up this to 900 and then let's drop the padding y down to two because that is pretty gigantic there we go so what we can do here also is give it a little bit of a shadow just so it pops a little bit more actually i don't really like that so let's drop that off and let's increase our padding y to three cool so that is a good start to a navbar it's not the most fancy navbar we can definitely make more in future videos but i want to get the overall strategy down for these and you you can really see that a lot of this is flex classes that are going to get things to sit side by side and then padding to space things correctly okay so this is looking pretty good here next up let's give it a little bit of a hover class so this and right here and right here on our two a tags let's just go for hover text black or even text gray at 900 so it's not black but it's not the gray that it was so if you hover over it it turns into that black and what i'm thinking here is our logo should probably pop a little bit more than those two so let's go back to our logo and let's say right here on the span class is font bold cool all right looking good there let's go down to our little sign up button and let's say where are you background is that hover is background yellow at 300 so it goes lighter and then on this hover background text or sorry text yellow at 800. so just one shade off of what it was there we go and i actually do like that padding-wise so let's go back to that you'll notice that i do play around with my tailwind classes a little bit when i'm designing and next up let's add a transition and a duration of one maybe 300 just so that that transition of that yellow background kind of pops nicely okay so that looks good right there so that's going to start it off for our overall navigation bar and if you wanted to mess around with this some more let's i want to show you how you can mess around and kind of move things around so i'm going to take this primary nav right and i'm going to move it out come here right here i'm going to cut that out i am going to drop this div right here drop this div right here and then paste it outside before the logo and now check out how easy it was to go to nav on the left logo in the middle and nav on the right and that's all because of this justified between class and then we just move things around using cut and paste let me undo all that and bring everything back to how it was cool i actually kind of liked the center logo okay so the thing that we talked about in the beginning of this video is let's make this mobile friendly now this is kind of the harder part of navigation but i want to show you the overall strategy here as well and i don't want to over complicate it so let me show you what this is going to look like so for this i'm going to change the view back to our side nav and the way i'm doing this is so that i can kind of do this right and i can shrink everything as we want to also for this notice how it's bunched up on the sides definitely add some padding x of maybe eight to that and now they don't sit so close to the edge so you can drop that to four and then you can change that based on if you want it to be closer to the edge on larger screens smaller screens etc okay so the overall strategy here is the logo is right here we have our primary nav right here we have our secondary nav right here so we are going to say primary nav and secondary nav are going to hide on smaller screens so here and here we're going to say hidden but then on medium screens we're going to switch that to block so right now it is hidden right as we go smaller oh here we go that actually should be medium is flex actually so we'll do that and there we go so on mobile or sorry on medium screens and above we're going to see those nav items on smaller screens we're not going to see that nav item and what we want to do here is we want to say mobile mobile button goes here so as i scroll down mobile button goes here i'm going to say div div right here and we're going to say class is medium hidden so on hidden screens it hides but let's also go for flex items center and space actually no space okay so mobile thing goes here all right so that's that so this is going to be a hamburger icon that you click and it will actually show the navigation but where is our navigation going to go you might ask our mobile menu will be down here so if i did div div mobile menu goes here it will show right there so as you click this button right here this will show and hide so that's our overall strategy for mobile menus and there are different strategies you can take from mobile menus you can have them slide in off canvas from the side you can have them kind of pop in and animate in we want to keep this one simple so that we can get the strategy down and then maybe if you want let me know in the comments we'll make more robust more production friendly navigation menus in future videos but here is our mobile menu so let's style this out a little bit let's do like four a tags or something well let's keep it short let's go for a2 and then let's go for features pricing and then here and here let's go for class is block i just want those to kind of be the full width there we go so as you scroll this is kind of the size of it right so then it's block and block and then let's go with a little bit of padding y of maybe four padding x of four let's go for text small let's drop our padding wide down to maybe two let's choose that and that and two okay that looks good and then on hover let's go for hover background gray at maybe what is our overall container at it is at 100 so let's say 200. okay so there's that and next up let's go back to hero icons let's go for a menu let's choose this menu right here copy svg up here mobile thing goes here let's just paste it right in and this is going to be wrapped in a button because we want to make this clickable so to make things clickable you either want a button or an a tag but an a tag is usually reserved for a link that actually goes somewhere this is just be clickable so it's a button here okay so let's see if we can't see where in the world that just went where did you go medium is hidden well let's double check that it's there so i'm seeing this svg is not showing and for svgs we should probably give it a width is six height is six so that it can know what to build on or what to show in so there's our mobile menu but as you go bigger it shows a normal navigation there we go so the strategy here is hide and show these two based on if this is clicked right okay so we have our mobile menu here we have our mobile button clicker here and then everything else is handled with nice tailwind classes so what we need to do here is we need to actually bring in a little javascript to here for this click event on this button so here i'm going to say class is hidden right here so it's going to be hidden and then as we click that button it's going to unhide so it'll remove that class of hidden and then it'll show so here is let's just give this a class of mobile menu and then let's give this button a class of mobile menu button all right so now is our little javascript so when we do javascript i like to do some things as far as commenting i like to grab everything we need add event listeners so to grab everything we need we need the const button is equal to document.queryselector and we're going to say button dot mobile menu button and you're saying chris you don't need this button word then that's totally fair you can totally remove it i kind of like leaving the html element in because for me mentally it's like oh that's an actual button element it's all preference you can remove that if you want const menu is equal to document.queryselector and i'm not going to put the differ this one because i automatically assume they're all divs so i'm just going to go mobile menu okay so now we have the two things that we need we're going to say button.add event listener click let's do an arrow function right here and then we're going to say menu dot toggle sorry.classlist.toggle hidden there we go so let's try it out click click click click and that is how we're gonna handle our mobile menu for this one so we have added two custom css classes which is regrettable but necessary for grabbing those out of our html and then let's say button add event listener click and we're just going to hide and show that hidden class so as we go and click here shows and hides shows and hides and you could add special javascript so that if you click outside of it it would also hide that would take a little more work that i think is beyond the scope of this video and the one thing i wanted to land on is if i scroll higher let's click this open and let's do this right here so as we go up to the bigger screens the mobile menu still shows let's make sure that this is hidden on larger screen so let's say medium is hidden for sure so even if it's open and then i go to that medium size it will hide because that responsive class is going to overwrite what it was and then it'll show back on mobile but i'll click it to close again all right that was a lot in this video i hope you enjoyed it let's recap here we have a nav we have a containing div we have the ability to place things in navigation thanks to flexbox and our justify classes and that's where all of the magic happens from nav bars next up we have the ability to add some padding to these a tags to get them some nice styling let's see we are adding in a mobile button and we're adding in a mobile menu which we are able to show and hide with a few lines of javascript the other thing that i want to note is it's really cool you can take this background gray and change that out to 900 change out the text coloring and now you have a black nav bar so really easy to customize things thanks to tailwind all right that was a good video i hope you enjoyed it if you did please like and subscribe let me know in the comments what else you want us to build with tailwind and we'll get right to it thanks for watching

Channel: Better Dev

Views: 30,358

Rating: 4.9730511 out of 5

Keywords: web development, javascript

Id: puaX_nhTMRU

Length: 27min 15sec (1635 seconds)

Published: Wed Feb 03 2021