24. A more complicated navigation - Responsive CSS Tutorial

Key Takeaways

off so let's go and twe once you take this nice navigation we did and I think it already looks pretty good but we want to up the game of it a little bit and make it look like this which is quite common on sites that you see these days where we have the navigation on the right and probably a logo or something else on the left side and we can just keep going using what we know about flexbox to pull this off so let's go and take a look what I'm going to do is it will be a bit wider so I'm going to leave this at a large size like this just for now so it does mean we'll have to shrink and open it but that's okay so before we get into it what I want to take a look at is how I'm gonna structure it so we have already my header which has that light gray background on it and some padding on the top and the bottom then I have already this div for my site title and I have my nav over here that has my UL in it but I need something that's gonna hold all of my content in the middle of the page just to stop it from stretching from one extreme end to the other so for that you can probably guess the name of it already I'm gonna call that div class equals container and I can come all the way after my nav here and I can close that container and I'll put a comment here close container just so I can remember what that is if ever ice you know I'm not sure why I have this random div floating around and because all of this is nested inside of that container I'm gonna select it all and push tab on my keyboard and it will just push it all over so I can see through the nesting and through my spacing here that I'm inside of my container I'll jump back over to my stylesheet now and we can start styling this so I might a poorer fee I'm gonna come here to layout and the container is something very generic so here's my header I'm gonna put because it's more generic I'm gonna do this right at the top I'm gonna say container let's give it a width of let's say 90% because that's sort of what we've been doing and a max width and I'll stick with a I'm gonna 900 pixels for now we can always play with this a little bit later to make it bigger if we need to and just so we can really see it for now I'm gonna give it a border of one pixel solid madge and just like we've been doing up until now so there it is we just need it to be centered on the page now because we can see it is limiting to that max width and it is shrinking when we're going to the smaller sizes so I'm gonna let you Center it on the screen before I go ahead and do it I know I've had you do this one a lot but it is one of those things that people forget with the margin Auto on the left and the right especially early on when they're writing a lot of CSS they use a text align and it doesn't work and eventually they remember and it sort of cements in so I'm trying to cement it in as fast as I can by getting you to do it as often as possible so you can see here now that it is working and it's centering on the screen and because my max width it does limit it to the total size there but now we want to take this and put it on that side and take this and put it on this side we don't have the rest of our content and normally I would write all of my HTML first and then I would come through and write my CSS but we're not doing it this time just because we're focusing on just the navigation here so I wouldn't want to put a display flex on a container if that container is going to be reused in many places so like I've been talking about before I like having modifier classes I'm going to call it container nav and we can come back in and now I can edit that so on container I would come down right below that and add a container nav and give this a display of Flex if you did this ahead of time and you were just sort of jumping ahead because you wanted to practice and you thought you know and you gave it a different name or you put it directly on the container or whatever that divs that you gave it that's completely fine or if you just had some sort of like nav box and you put all of these styles on it it's okay I just know I'm gonna be reusing the width the max width and my margin:0 auto a few times on this site so I figure having a default container that I can reuse multiple times makes a lot of sense and then if I need to change it I can so display a flex it makes our columns if we come and take a look there we go we have two columns now now there are a few things that we want to change the easy one to fix is this is getting centered in here and we don't want anything to be centered that was in my heading header header text align Center which we don't need to have anymore so we can remove that and at least it will fix that problem and this part is perfectly fine but I want to move these all the way over to the right side can you think of a way we can do that that we've already looked at so if you remember this pink box here is my container and it's also my container and have and on the container nav I did display flex and they have all this empty space left over on this side and how can we redistribute empty space to put it in between things we can use justify content space between so justify content space between and there's only two items in this case so it just means all that empty space gets put here in the middle there's one last thing as you can see there is a bit of a gap here and you might be hanging that's not a big deal and my probably isn't the end of the world but because I know I'm going to be using a container and other content here and I want things to line up really nicely little differences like this make the difference between someone who's a good coder or a good designer and someone who's a little bit sloppy and people who are hiring are paying attention to details so you do need to learn how to be detail-oriented and look for these little things where things aren't lining up it's not as obvious when you don't have a border on something but you'd still notice that it's not perfectly lined up so if you remember what I did when I created this because it was Center aligned I said we can do a margin on the left and the right side and everything would be fine because it's centered and that means it's Eve they'll be equal margins on the left and the right which will keep it centered now we have it on the right side so that means I only want my margins on the left this is one of the few times when I won't use the shorthand and I'll just say margin left and in this case I'll do 2m and we can take a look and now we've gotten rid of that space but I've kept everything here I did 2m instead of one because before I had one M on home and one M on about me here so one plus one I was getting two on the side and I was getting two on this side here as well where's now I'm only putting a march on the left so I'm putting it as two M that does mean there's a two M margin on this side here but that's fine that's not getting in the way of anything it's just giving us a little bit of breathing room and if anything it's gonna stop us when we're shrinking from hitting that the the social life text that's right there so it's gonna prevent us from smacking into that and that gives us the room that we need now it's starting to look pretty ugly when I do this though so the first thing I'm going to do right now is I'm going to turn off this border of magenta because we don't want that on there anymore which makes it look a little bit better and in the next video we're going to add in a media query to prevent this weirdness from happening and we're gonna add it so this actually falls underneath and we have a few different changes going on we'll get some practice with mediocre