2.4 Headers and Footers

Hello, and welcome back. In this lesson, we're going to look at how to create a navbar at the top of our screen, and a footer at the bottom, using markups specific to Materialize. And it has some nice default styles that we can take advantage of when we do it this way. Instead of just creating this row that we style ourselves, we can take advantage of Materialize's markup. So we're starting with the same file we ended up with in the last lesson, we're just gonna create a new forked version of that. And in this new version, the first thing I'm gonna do is, I'm gonna get rid of all the markup inside that top row. So we still have a row, but we don't have the column inside it anymore. And the markup for this isn't really clear on the Materialize website. It took me a couple of times to figure exactly how to put this together because the widths weren't matching up between rows. So the way we need to do this is, inside our top row here, we're gonna create a nav element, which is going to be kind of the foundation for this header that we're gonna create. And just by creating that nav element, you can see over here on the right what the default styles look like in Materialize for a navbar. So it gives us this reddish-pink color with a drop shadow behind it. Well, we can do a lot more inside this navbar, making use of Materialize-specific classes, and the first of those classes I'm gonna use is the nav-wrapper class. So we're gonna create a div with a class of nav-wrapper. And then inside that nav-wrapper class, we're going to have our column setup. So we're going to create another div with a class of col, for column. And this is gonna take up the full width, and this is just the content inside the navbar. It's gonna take up the full width, so it's gonna be .s12, there we go. And then inside this column, we can add some content using some more classes available to us in Materialize. So there's one class called brand-logo, and we can see very easily what that does by creating an anchor tag here, .brand-logo. And then we'll just give the href a pound there, and inside our anchor tag, I'm just gonna type Header. And we can just see what that looks like by default. Now, if we really expand this out, we can see that at a large size, that Header text is over here on the left. But as we get down to a medium size, it jumps to the middle. Now, we can change that by adding another class here for this brand-logo. And we're gonna call this class left, and we see that our header jumps over to the left. We can also use an unordered list inside our nav element to create some really nice buttons. So after our anchor tag, I'm gonna create an unordered list, and inside that unordered list, I'm gonna put three list items, so we'll do li times 3, and there we go. So for all of these list items, we're going to have an anchor tag inside it. So I'm gonna hold on to the Alt key, or Option if you're using a Mac, and click and drag down. And now you'll see that all three of these rows are selected, and I'm gonna create an anchor tag here, and I'm just gonna set the href to a value of #. And then we'll close that anchor tag here, /a, there we go. And then inside those anchor tags we'll just put some text. So our first one might say, Products, for our second one, Services, and for third one, we'll say Blog. And so we can see it doesn't look too good initially, because it's over here on the left, on top of our header. But in our unordered list here, we can add a class of right, and that will pull it all over to the right side of our menu. And now when we hover over those, you can see these have a nice hover effect. It's a really nice style, and it all comes default within Materialize. Now, we don't have time to cover all the things you can do with a navbar, but I do want to encourage you to jump over to materializecss.com and take a look at the documentation. So if you go down to the components section and scroll down to Navbar, you can see a lot more that you can do with our navbars here. If you scroll down towards the bottom, you'll find that there is, I think it's really close to the bottom, and there we go, this Mobile Collapse Button. If you follow the markup that you see down here for that Mobile Collapse Button, then once you get your browser down to a certain size. All of your unordered list items here, all of these links, will collapse down into a single icon, and it will make it very, very mobile friendly for you. So again, we don't have time to cover all of that, but it's important to know where you can find that information. So let me go ahead and throw something in here for you that you can just copy and paste yourself if you want. I'm going to comment out this entire row here that contains our navbar, so that you can still have it if you want it. But I'm gonna comment that out, and I always forget what the shortcut is for that, it is Ctrl+Shift+/. Okay, so gonna highlight that, Ctrl+Shift+/, and that will comment that out. And I'm gonna copy some more text outside of this container. And what this markup does if we just go ahead and paste it here, is it creates a full width nav bar. And one thing we need to do here for our brand logo is also add the left class to it, to pull that header text over to the left. And now you'll see we have a full width navbar that goes beyond the boundaries of our container. So it's just another option you have available to you, just wanted to point that out. So you've now got that and the other version here in our ending pin for this lesson. So now I wanna jump down really quick to the very bottom and create a footer and we're gonna do this outside the container. And again, I'm gonna do this just by copying and pasting some text, since we don't have a whole lot of time. We're just gonna paste that footer down here, so we'll take a quick look at it, it's actually a footer element with a class of page footer. Inside that is a container and then a row, and then we can have a couple of columns inside that footer. And we can take a look at that down here at the bottom, and you'll notice that we also have a div called footer-copyright. Which gives us an even darker colored bar down here at the bottom, with some copyright information. So those are the basic of creating a header and a footer using Materialize. Thank you for watching, and I'll see you in the next lesson.