Header & Navbar

[00:00:00]
>> All right, so I'm gonna start here, the next part is we're gonna talk about the header. And we're gonna talk about the nav bar, and how we're going to repurpose that over a whole bunch of different breakpoints. And we're going to use Flexbox to lay this all out, because Flexbox is very cool.

[00:00:17]
When it comes to NAV bars, it does amazing thing and again, this is one of the big differentiators between Flexbox and grid. Flexbox can do some things with the navbar that are really just not possible with grid. So, let's take a look at our screenshots for what we're going for so, here is the desktop version of the navbar.

[00:00:36]
Notice here I've got the logo in the middle, this tends to be a really popular trend right now, how do we get a logo in the middle of the navbar? When we go to a tablet, and we can put the logo on the top with a nav bar underneath, so how are we going to make that magic happen?

[00:00:53]
And then finally on mobile, I've just set these up these navigation buttons up as buttons. And in my advanced CSS layouts course, I do walk through how to do a hamburger button solution using CSS only. So since I did that there I thought we do some different styling here to show you how to make buttons here instead for your mobile navigation.

[00:01:20]
There's only a few of these so it the layout works okay so let's start then with our HTML and our CSS. So the first thing we want to do is we're going to have to put the HTML into this web page, so it's the header of the document.

[00:01:40]
So we want it to go probably at the top probably before the mission and so, in basic format, we're going to have a header right, slash header. Then inside of that, we're gonna have what we're gonna have some navigation. One of the nice things about navigation is that there's really only one correct way to code navigation on your website, and that is with an unordered list.

[00:02:12]
That is all navigation is it is an unordered list of links they can, you can visit them in any particular order. I know the marketing department wants them to go in a very specific order on the web page. And that's fine but it is there's not an ordered list and is an unordered list.

[00:02:28]
So we can set that up, and then we can set up our for navigation items that we have here, so we have an LI, we have an A. We'll set these not to really go anywhere in particular because we're not going to build a whole bunch of pages for these collections slash a slash li, and then we can just copy paste that.

[00:03:04]
So we have four of those, and we're going to have about contact and donations. Okay, straightforward enough, that's an app bar and if we just take a look at what we've got so far. Open it up in our default browser, that's what it should look l tiny little nav bar up there in the upper left hand corner, with all ugly blue underlined links, okay?

[00:03:37]
So now what do we do in order to get a logo on the page well, we're gonna make this logo part of this navbar, so we can say to make it a clickable. Clickable logo it's gonna go somewhere, probably back to the homepage. And then here for our image, we're just simply going to say img src, the image source is going to be what?

[00:04:10]
Here it is header logo dot SVG I put it outside of these folders, this is a new a new element that you're going to want to grab. So it is directly inside a folder number five, here's the file here called header logo dot SVG. You can just drag that into the images directory, yes going ahead and move it.

[00:04:31]
You'll want to copy it to the end folder if you're going to use that and then we can, get back to typing here. So Image Source Image slash header logo dot SVG, that's going to be our image here for the logo. And then we need of course, always need our alt text while of wonder, click for home.

[00:04:53]
I always like to add a click for home at the end of my all text, because it's a clickable logo, If we just say while of wonder no one has any idea what it's there for. So I always like to say click for home to indicate its purpose, then we can close that close the link, close the Li.

[00:05:16]
Save that. And once again when we refresh the page, now you should see the logo up there with its own bullet point. So the last thing that we probably are going to wind up meeting here, because once again we want to have yellow. We want it to stretch the full width of the web page, we can add to this, and I'm going to do exactly the same thing here Div with a class of header.

[00:05:45]
And we can close that div down here are at the bottom, so that will style it up so that header class gives us the yellow all the way across. Then the header which is the more meaningful more semantic tag is one level in that is going to contain our navigation bar and our logo and so forth.

[00:06:07]
>> Sometimes when I make a web page and the footer displays kind of in the center of the screen, It's not sticking to the bottom.
>> Okay.
>> Whats the solution for that?
>> Well, your footer is displaying in the middle of the page and on top of some stuff.

[00:06:22]
Then you were probably using some kind of positioning with that often it's sticky positioning or it's fixed positioning that you're using with your footer. And that can do some weird things if you are using regular old position static styling. That's the default for all HTML elements unless you change the position property in some other value.

[00:06:42]
Your footer show always be at the bottom of the web page or in the source order exactly in the order in which it should go unless. You're talking about the footer shows up in the middle of the web page, because the page is short is that is that the other problem.

[00:06:59]
And that would be the other issue remember, what I told you earlier is that the height of the content determines the height of the web page. So the content by default, if you only have a tiny little bit of content, then that footer is definitely gonna come up.

[00:07:14]
And show up wherever in the middle of the page or someplace else, wherever that content ends and the footer is coming up right after it. So if you don't want that type of effect you you could always set some kind of height somewhere on your webpage. Or tell Flexbox to stretch or some combination of those types of things to try to push the footer down to the bottom, so that would be something that I would think about there too.