How to Create a Website - Complete workflow | Part 06.1: Building the navigation with Flexbox

Key Takeaways

hey guys and welcome to today's video where we're gonna be looking at how to build out a mobile navigation menu using flexbox now bonus you're getting two videos today our ride so this first video here is just going to be all about styling everything using flexbox it's a different way to build up the navigation you're gonna see it's really really awesome and when that video is done there will be a card on the side where you can click and get right away into part two where we're gonna look at that jQuery and how to build up the whole thing all of that out of the way let's jump right into it so the very first thing I'm going to do is close a few of these files that we were last using I'm gonna close my typography and my buttons I don't need any more colors I'll leave open just in case base I still need no I don't need my base main grid I can close for now one thing you might notice it's a bit different there's a pre pro six config file here I can actually delete my old one I've upgraded pre pros to the newest version which is six I'm a little bit late to the party they upgraded it a while ago you can see I've gone with a dark UI the layouts a little bit different but you know functionality is all the same so it's doing the same things it was doing before so to get started with my navigation and make a new file and let's do a save as in here I am going to jump into my layout there it is and we will do a nav no that was weird okay so there we go I have my nav file that's good and ready to go so I have a few different things I'm gonna have to do in here and one of them I turned off my layout header probably mean nav okay I can take this over here we want to see my main nav now so we're gonna save that it should appear back cool actually there's another thing I put my main nav all of mine abs are in an on styled list so I do I'm gonna start with that which should go in my base file unstyled list you know the basics of any unstyled list margin:0 padding:0 list-style:none did I not do that properly cuz list on my ul base base base there we go I made a little typo in there so that looks better and now I can close that down in my nav ok so we're gonna go to my nav actually we also have to go to my main before I forget this layout import layout to slash nav and in here we can start working so the first thing I'm gonna do and remember I'm using flexbox so I actually I want to keep them sort of like that so this is my main nav and what do I want to do with my main nav there's a few things I want to do so let's start by giving it a background color I'm gonna give it a background of accent I think we'll keep accent not sure but we'll start with that I want it to be full screen so we're gonna give it a position of absolute and then top the zero left our bottom 0 right 0 left 0 that should do but that's going in the header oh my main header is position absolute oh okay I can fix that um okay there's a couple things I put my header I give it a top of one M which is gonna create this space here instead of on my nav here I could give my top like a negative one M that could work the only problem with that is I find it a little bit hacky and it might not be super easy to remember you know maintainability of the site that's kind of awkward so I think what I'd rather do is put my top here to zero and just give it a padding top of one M and that sort of fixes all of that now for the issue of because this is position:absolute but it's inside my header it's being constrained by the header there you know my bottom zero stops it here so I'm actually going to take the bottom off and I'm gonna give it a height of 100 viewport height so that should there we go it's filling up the whole screen so remember I'm doing mobile first this is my mobile navigation and when I turn on my navigation I'm going to want it to fill up the whole screen it's gonna take over the screen when somebody opens up the navigation good good good I think that's it for there we just have to obviously style what everything looks like inside there now so I'd mentioned that I want my to use flexbox as much as possible so I'm gonna style my nation as well with flexbox so my UL that's inside of main nav will be a display flex and they're all gonna go next to each other like that so there's a few different things I could do here let's just change the Flex direction I guess would probably be the easiest flex direction I want it to be a column yes there we go so flex direction by default is row meaning that they're gonna go this way across I don't want them to be a row I want them to be a column so I'm gonna call them and then they're gonna go in that direction and then let's do a text-align:center cuz that's gonna look a little bit nicer okay and so what I want to do I want to put an equal amount of space between these I don't want them all stuck here I want them all equally spaced out so with that I should be able to do a justify content space around and that should put an equal amount of space between them all but of course it didn't why not let's go take a look um oops wrong place it's in my header my nav no my list my nav is taking up the whole screen but my unstyled list is not we'll just give it this the height as well height 100 viewport height there we go and now we can see that they're all equally spaced out and if this changes the whole thing changes there now if you're not familiar with Flex box one thing I'd really recommend is that you use they call them flex box playgrounds and stuff so this is one that I found I'm gonna put the link in the description below I really like this one it lets you add different flex items so say you want you know I can add in Flex items I can choose is it an inline flex or a flex flex Direction I can play around with so in this case we're doing a column this doesn't really change anything right now justified content so this is what I was playing around with so you can see you can just click through them all and see what the differences are going to be so when you're looking for something there's lots of different properties to choose from when you're using flexbox so I really playing around with these can really really help there's also the Flex item properties so the Flex chloro and Flex shrink which we can use to play around a little bit we're probably gonna dive into this a little bit after to give you a better idea of what's happening so there we go they're all equally spaced I can probably get rid of this height actually as long as my UL has the right height yeah this is growing too you know this is matching automatically matching so I don't need that 100 viewport height on that I only need my UL my li is I'm gonna need a few properties so let's come in here and say my li so my main nav Li has a let's just give it a background some curious background of light blue yeah that's what I thought was it was gonna look like so that's okay for now I want these to fill up the whole space available to them I don't want them to be really narrow with this really big space in between I actually want them filling up that whole space which would give us a nice big big big area to be able to click on so with our flex stuff there's more stuff in here we can do so I'm going to give this a flex the Flex is a shorthand property it includes the Flex grow the Flex shrink and whoops flex grow flex shrink properties and the flex flex basis property so they're all included in here so a little flex growth like shrink flex basis so what I'm going to do is just I want my grow my shrink to be one and the Flex basis to be auto so it's just gonna be a flex one one auto and that should make it fill up the whole space there we go so if I look here I can see my list items are all taking up the full amount of space the only problem now is the inside is aligned to the top so that's that's good except I don't want the a align to the top I want the a align to the middle one thing we'll add on to here just so we can see really the whole space and I'm gonna change the colors of all of this let's add in my border bottom one pixel solid and I'm going to go with dark in no I'm not even gonna go with the darken I'm just going to go with the RGB a of black zero zero zero poops zero and then like 0.25 or something that should give us like a light gray line alright it'll be light blue cuz we're on blue darker blue line maybe even 15 I want a subtle subtle and once I get my colors I might play with that a little bit but just creating a subtle line in between them all and now I can actually take off my light blue there we go so we can see the separation between them and I want this to be moved down and put in the middle so to do that what I'm going to do is I'm going to justify the content just I want to do a justified content center [Music] no I went doing a line items a line item center except that's not gonna work right now I'm trying to use flex properties now my ul is set to flex so these are flexing and I can use all of the different Flex properties on my Li you know this flex thing here but now I want my aid to be able to do stuff on it so I actually have to do a display flex on this as well so display flex in my center line anymore so now that now these A's inside are being affected by the display flex I can now use my align items and do a center and that will vertically align them and we all know vertical alignment in CSS is a pain in the ass but flex box has saved that or not saved it but made it much easier and now I need it centered in the middle so I can do a that's where I want the justified content center which will pop it right in the middle awesome that looks really good I'm happy with that the last thing I need to do now is style my actual links and the nice thing with this is I don't have to worry about before I style my links just to say I don't have to worry about you know my my padding on the top and bottom and if I created more list items it would automatically adjust to it so say I'd originally done something like where I'm saying that there's padding on the top and bottom and then I add a new thing I'd probably have to come in and adjust all my numbers whether it was a percentage or however else I was doing it and now I don't have to just to show you if I come and add in just copy that and paste it in there it just automatically adjusts and it works and let's paste another one in there and it just works flex box is awesome and it's really widely supported now it's not perfect obviously but it has pretty wide support now so that's great now I just want to style my my links so that's the easy part so my links are my a ah there we go so what I want to doo-doo-doo-doo my color let's try a text universe and see if we can read it that's okay [Music] text-decoration:none that's good I think I'm just gonna make my font size a bit bigger for this as well but I'm gonna do that just done and have font size 1.2 rim cool the reason I'm putting it on my main nav and not on the links is I'm just thinking maybe for whatever reason at one point in the navigation there's some regular text and not link text don't know why that would happen but just in case it happens all of my text inside of here will be the same size so I'm not being overly specific and limiting it to something that's inside of here I'm just saying any text that happens to get thrown in the main nav should be that font size and that's it for this video guys the menu is done and you should see a card on the side now do get to part two of building at the this navigation menu where we're gonna be looking at building the hamburger menu and using some jQuery to animate it moving in and out so I'll see you guys over there