7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 55 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Styling a Navbar

Tailwind has a ton of CSS classes, and at first glance, their names can be rather cryptic. In this lesson, you'll get familiar with some of the basic classes so that you can get started using them with confidence.

2.2 Styling a Navbar

Tailwind is a CSS framework. Now I know that that's obvious, but I wanna focus on the term framework. Because when you think of framework, especially with other languages, you think of, well, a framework, something that makes it easier to develop applications. For example, if you're writing a node application using Express. Express is of course the framework that you're using to make it easier to build an HTTP application. Well, we can apply that same thinking to CSS. CSS is a framework to make it easier to apply CSS style to our elements. And that means that there is an API that we need to be familiar with if we are gonna use tailwind within our projects. Now, I know that that sounds kinda weird to have an API for working with CSS, but that is exactly what tailwind is. That's what bootstrap is. It gives us an API to build our applications and make them look as good as we can possibly make them. So in this lesson we are gonna add a navbar to our page. In fact, we are gonna make the background color white again so that we can have a navbar that's gonna be Indigo. Of course you can use whatever color that you want. And speaking of colors, if you wanna see what the other colors that are available, just look at the documentation. Over on the left hand side under customization, there is colors and you can see all of the colors, the grays, the reds, yellows, greens, blues and so on. If you scroll down even more, then there's even more colors there. So, those are the colors and of course this is all customizable. Tailwind is built to be flexible. So if you wanna define your own colors, you can do that as well. Now we are gonna be covering how to do that, because frankly the colors that are here are good enough for me. So as far as our navbar is concerned, over on the left hand side we will have the branding of the page, then over on the right hand side we will have the menu. So let's get started by removing this background color class from the body. And we are gonna have a div element that's gonna contain the navbar. And this is where we will set kinda the global settings as far as the navbar is concerned. So this is where the background color, the padding, all of that stuff is gonna be. Then there's gonna be another div element that is gonna contain the individual pieces of the navbar such as the branding and then we will have another div element that will have an ID for the menu. Now we aren't gonna worry about the IDs as far as CSS is concerned. We will just use the classes provided through bootstrap. Let's add in some text here for the brand. We'll just call this my page. And for the background color, let's reuse that Indigo. Of course you can use whatever you want and I'm gonna use shade of 700. Now when it comes to colors, I've mentioned that we are working with essentially an API. So the colors follow this particular pattern. If you wanna use a background color, it begins with BG which makes sense. If you wanna use a foreground color, it starts with text. So if you wanna set the text color, starts with text. If you wanna set the background color, it is bg. And then the rest of the class name follows the same pattern such as the name of the color and then the shading. So if we save this and hop on over to the browser, we can see that we have our navbar. But of course we need our menu, so let's go ahead and add that. And these can just be A elements and we will have the text of this as Home. Let's copy that, paste it a few times so that we will have a guess about and then we will have a log out even though we're not doing anything as far as any kinda logging in. But if we look at this, of course the styling isn't set yet, but we can at least see that we have the branding and the menu. Now one thing I do wanna make sure is that our navbar is gonna be the width of its container. And we have a CSS class that we can use to do that, that is w-full. So w is of course for width, full meaning that it is gonna be the full width of the container. The same is true for the height. If you wanted to set the height, that would be h for height and then full. Now of course we aren't gonna see the Indigo stretch all the way from top to bottom because the body's height is only as large as the elements that it contains. If we wanted to change that, we would have to set it a 100% height on the body, but we aren't gonna worry with that just yet. We will just stick with the full width and let's also add some padding. Now padding starts with P, kinda makes sense that we would wanna set padding starting with P because if we wanted to set the width that started with w, if we wanted to set the background color, that started with bg. So we are gonna set the padding. And then there are a set of numeric values that are gonna set the width. Now, these values are actually in REM Units, so they are more responsive than they would be if it was just pixels. So you can see there that padding one added a little bit more padding. Padding two is gonna add even more. Let's go with padding three. That will give us a nice amount of padding all the way around. And let's go ahead and set the text color as well. So we'll start with text. I want this to be white so that it stands out. Now why does one of those special colors in that there aren't any shades of white because, well, if it was a shade of white then it would be gray actually. So all you have to do is set text white for a foreground color of white. And there we go. But now we wanna have the branding on the left hand side and the menu on the right. So we can do that using Flexbox. So let's add a class to the div element that directly contains our two pieces of the navbar, the branding and the menu. What we're gonna do here is use a class called flex. This is gonna apply the display flex to this div element, so that then we can set the justification for its children with justify between. And if we save that, then we will of course see what we would expect. The branding on the left, the menu on the right. And of course if we wanted to justify the content using any one of the other values such as start or end or center or around or evenly, then we would just need to use those values. Now, this can somewhat be confused with justifying the items, but that's not the case here. We wanna justify the content. So when it comes to just justifying content it is justify, followed by whatever value that we want. And in this case that was between. And so once again if we look at that in the browser, we have our navbar almost done. There's a few things that we need to do here. But on the left hand side, we have our branding, on the right hand side we have our menu. And of course this is responsive because we haven't really done anything special yet, but by using just a few CSS classes we didn't write any CSS at all. We now have a functional navbar that we could use in any kinda project.

Back to the top