Materialize Tutorial #17 - Creating the Header

Key Takeaways

okay then so the first thing we want to do is create that header and the nav bar at the top of the page so before we actually create the nav bar I'm going to create a header tag first of all and what I'd like to do is give this header a background image you remember that guy that sat at the top with the paint from his eyes that's going to be the background image of our header now this is one of the very few times I'm going to be using my own custom CSS to do this because I don't think there's anything really in materialised that can do what I want this to do here I just want to apply a background image to this header and make the header a fixed height so let's go to the top up here and what I'll do underneath the title is just adding a style tag and inside there we'll do the header tag for our selector then all we want to do is give this a background image first of all and it will be a URL because we want to load in an image and that URL is get a points to this image right here month so we need to go inside the image folder then it's a man JPEG so we can say IMG for the folder forward slash man JPEG all right so the background size is going to be cover so that basically means cover what's available to us right we want to make it the available width now the background position is going to be in the center so that the face is always centrally aligned then we're gonna give this a min height as well of around about a thousand pixels okay so if we save that and view this in the browser so far we can see that I mean two there now this is the header I'm going to zoom out a touch just to make it 100% okay so this is the header now right now when we get to smaller screens like this we don't want it to be this tall because then a user is going to have to scroll down all this way just to get to the content at the bottom of the image so what we'll do for smaller screens is make this a little bit smaller maybe 500 pixels in height or something like that so we'll add in a media query first of all to target screens and where the max - width is going to be around about 670 pixels okay so at this point we want our header to be a min height of around about 500 pixels so half the height so now if we zoom over here we can see that this is the image now for mobile devices and as we get larger then the image grows bigger as well for desktops all right so that's the background image done the next thing we want to do is tackle that navbar so let's first of all create enough and give this a class of nav - a wrapper we've seen all of this before we create enough with nav wrapper to create that navigation to begin with and if I save this now and view it in a browser we can see that over there at the top I'm going to zoom in just a touch again so we can see that a bit clearer then what I'll do is color this a better color or rather in fact we'll color this trans parent can spell transparent no I think it's an either okay so let's save that and now we can see that that navbar right there doesn't have any background color but if you look closely over here on the right you can see a little shadow see right here this is where the navbar ends it still has that shadow which is quite nice okay so there's the nav wrapper at the top the next thing we want to do is add all the content inside now I want to create a container so that I'm centralizing all of my content and it doesn't start over here it's gonna start over here and end here or something rather than the edges so let's create that div with a class of container first of all all right and inside this the first thing we want to do is a brand logo or the site title if you will so an anchor tag and that's going to have a class of brand - logo remember this is the class we saw way back in the navigation tutorial all right so let's call this photo ninja all right so if we save that and view it we should see that over here looking good all right the next thing we want to do after this is to create some kind of UL for all the different links so say you out and there we'll give this a class of right so it floats over to the right and we also want to hide this on medium sized screens and down because that's where the mobile menu is going to take effect so we'll give this a class also of hide on Meade and down all right so this is the UL with the different links the first one inside is gonna have an anchor tag and this will go nowhere so let's just put a normal hash in there for now and we'll call this one photos and we'll do the same thing twice down there but this one is going to be services and then finally it will do contact so they are basically the three big sections in the website right and we'll link those up later when we create those sections all right then so now we'll create a mobile menu and to do that we'll create another URL now you could add it outside the head if you wanted to it doesn't really matter I'm adding it right here so I'll say ul dots side now and then this will be gray background and well lighten it a little bit so I'll say lighten - - and we'll also give this an ID equal to mobile menu just so we can target this later on and then what we'd like to do is just copy these links right here because we're going to show the same links for a mobile as we would on the desktop so let's scoot those back alright so we have those there now now if we save this and view it in a browser we can see those right there but as we get to a smaller screen they're going to disappear now we have this you well over here but we're not actually showing it on the screen yet we need some kind of button in the navbar so that that ul shows and pops out from the side so let's create that button first of all let's go underneath the title over here and add in another anchor tag this time with a class off side nav - trigger and we'll also give this a data - target attribute and set that equal to the ID that we created right down here so that is going to be mobile - menu and inside we want an icon so enter in and then I dot material - icons and we want the menu icon right there okay then so if we save this now we should see that icon but if we click on it nothing yet happens we need to initialize this in the JavaScript so let's do that first of all let's go down to the JavaScript and come over here and then all we need to do is get a hold of the side now which is this thing right here so we'll say jQuery dots side enough and then we need to use a method called side nav and that is going to initialize this for us so let's save it and see this works whoo it does alright so now we have our links over there for the desktop and as we get smaller for mobile screens we can see that now the links pop out from the left so that was simple right we're creating our header and also now our nav bar in the top