Build a Navbar Layout using Tailwind and Flexbox

Toggle Navar Menu Links in Tailwind with Vue

Prefix Tailwind Utility Classes with Breakpoints to Make a Responsive Navbar

Build a Responsive Navbar with Tailwind

We started by building just the mobile layout of the navbar which looks great but wont on larger screens. We'll want to handle each screen size and adjust the style on each breakpoint. When the navbar is big enough, we can fit the links within the navbar instead of dropping them down below.

In this lesson, we will use the `sm` breakpoint to start styling the navbar for screens that are larger than mobile.

https://app.egghead.io/api/v1/lessons/tailwind-prefix-tailwind-utility-classes-with-breakpoints-to-make-a-responsive-navbar/subtitles

Instructor: [0:00] Next, let's work on making this navbar actually responsive. We started by building just the mobile layout. You can see here when we click the button, the links show up, when we click the button, the links close.

[0:10] Even when we get up to Tailwind small screen size, which is 640 pixels wide, I think we probably have room to fit all of these links right here in the navbar instead of having to use the hamburger menu. Let's work on making this actually work the way we want.

[0:25] The first think I'm going to do is hid this hamburger menu once we get to the small screen size. We can do that by adding a class to the div that's holding it and giving that a class of sm-hidden, which says give this display none on small screens and above. Now you can see the hamburger menu is gone.

[0:44] We can bring these links into view by adding a sm-block class, which says, "On small screens, give this a display a block no matter what." Again, because tailwind's responsive classes apply from whatever breakpoint they start at all the way up to the highest screen size.

[1:02] What this is actually doing is overriding the hidden class here and saying, no matter what this is set to, whether it's block or hidden, once you hit the small screen size, it should always be blocked, so the links are always visible.

[1:14] Next, if we want these links to actually appear beside this Workcation logo, I think we're probably going to want to use Flexbox, just like we did with the button.

[1:23] If we want all this stuff to appear on the right, what we need to do is find the parent container, the nearest ancestor of both the div containing the logo, which is this div, and the div with the links, and give that a class of flex on small screens and above.

[1:38] If we say SM flex, that should put things next to each other. If we say SM justify between, that should slam it all the way over to the right. Next, let's make all these links actually appear inline next to each other as well.

[1:52] There's a couple of ways that. We could do that we could take all of these links, and instead of making them display block, like we are here, we could switch them to inline block at this screen size by adding an SM inline block class to all of these.

[2:07] That would be something like SM inline block. That would basically do the trick. I think an approach that I actually like a little bit better in this case is to make the container a flex container like we did for the header, because that'll automatically make everything line up horizontally. Then we can control the positioning of these links however we want.

[2:27] Instead of making this SM block, why don't we make this SM flex? Since flex acts exactly like a blockable container, except it makes its children flex children. Now you can see we've got a couple of funky alignment issues here.

[2:41] Because both of these links have mt-1, they're being pushed down a little bit lower than this link. I don't think you have to remove that from these, so I'm going to add at the very end here, sm mt-, overriding that.

[2:54] Now, instead of having top margins, since these items are next to each other, we can probably add some left margins so there's a little bit of space between each one instead. Why don't we do something like, sm ml-2, something like that, and see what that looks like. Now we have a little bit of space between each one, which looks pretty good.

[3:13] The next thing I want to look at is the surrounding space around everything. Right now, you can see the margin on this side, or the padding on this side, rather, is quite a bit less than we have on this side. Why don't we take a look at what's causing that?

[3:26] Right now, we have all this padding on the container, wrapping all of the links that's there to make things look the way they're supposed to, in the stacked view. Since things are next to each other now, we probably don't want it to have the exact same padding.

[3:40] I'm going to start by sending this to p- and see what that looks like, just like removing all padding entirely. Now you can see, obviously, it goes way off to the right and way up to the top. If we wanted to simulate the padding that we're using around this logo, we could duplicate these classes. We could take this px-4 or py-3 and add it to this container as well.

[4:02] A better way to handle that would be to move this padding to the parent container -- this container -- when we're in this desktop view. To me, it makes a little bit more sense, when possible, to use one declaration to handle the padding for the entire container.

[4:21] Instead of duplicating this on both the left half and the right half, if we can apply all of this to the parent, that's simpler, because we can change it in one place if we need to. We do need to keep this here for when we're on the mobile screens, but we can add it up here on desktop screens as well, and remove it from this div on the desktop screens.

[4:41] I'm going to do something like sm px-4, sm py-3, and then down here, we'll do sm p- to remove it. Now you can see we do have that even padding around the entire thing.

[4:54] The last thing to look at is the alignment of this text. Right now, we aren't doing anything to vertically align this in any special way. Maybe we could add something like sm items-center to center it. You can see that this doesn't change anything. What that says to me is that, these items happen to be the exact same height as this logo, so you don't notice it.

[5:17] If this was to be, say, h-12, now you can see these stay centered. Whereas, if we were to get rid of this class, they're going to flow to the top. I do think we want to say that they should be centered, just in case the heights ever were different, or we did want to change the height, but that doesn't actually have any visual impact on what we're doing right now.

[5:35] Let's take a look at how this works. This seems to work OK at this screen size. We got the logo over here. We got the links over on the right. Everything's OK.

[5:42] As we go up to bigger sizes, you can see the layout just stays the same. We don't need to make any tweaks at these screen sizes because everything fits on the small screen size. Those changes will just cascade all the way up to the largest one.

[5:54] Once we dropped down below 640 pixels, like 375 here in this mobile view, you can see everything switches back to how it was before. If we did everything right, we shouldn't have broken this load at all. It looks like we did and it looks like everything's still looks good.

[6:08] That's how we can take this mobile nav bar and make it fully responsive so it works on both mobile screens and desktop screens.

Prefix Tailwind Utility Classes with Breakpoints to Make a Responsive Navbar

Share this video with your friends

Course

Build a Responsive Navbar with Tailwind