Create a responsive navigation nav with no JS!

the very first video I ever made here on YouTube was on how to make a navbar with a cool little hover effect and I really liked that video and it's actually my most popular video which is kind of cool because it was the very first one I ever did but it's a little bit you know I used floats and it wasn't responsive I get lots of questions on that video about doing some more interesting things with it so that's exactly what we're gonna do in this video I'm back it's been three weeks and honestly I miss making this video so I'm really happy to be back real life was just crazy it was insane now I finally have some time to breathe in sista and because of that it also means that I have time to make these videos again which is great so thank you for being patient with me if this is your first video and you didn't even know I was on a break or you're watching this in the future yeah well welcome if you don't already know my name is Kevin and here at my channel I make videos where we explore how to make the web and how to make it look good while we're at it with a new video every single week well almost every single week as it just said it took a little break but for the most part it's every single week so as I mentioned my very first video I made this navbar here that you can see on the screen and I think it looks good I really do like it but it's not responsive as I said and I think it really could be improved and we're gonna do a lot of good things to improve it but I'm not just gonna go back in and refactor it we're gonna go in and just rip it all apart and well no we're not ripping apart we're starting from zero I'm just gonna start from scratch we're gonna build it up I'm gonna make it responsive we're gonna have a nice little like a clicky box it's gonna go up and down with no JavaScript so I think that's gonna be cool we'll throw a little CSS variable in there for fun we're gonna be using CSS grid we're gonna be using flexbox we're gonna be bringing it to the modern times and modern CSS that we have now so I will be looking at a lot of little things along the way that I've explored in more detail in my other videos so down in the description below there'll be links to a lot of my other videos just ones that go more in depth on some of the topics that I'm briefly going over so in this video even if you're not sure what a CSS variable is you'll be able to follow along no problem but if you want more details on it they'll be down in the description also you might notice that it's a longer video so what I've done is I put timestamps down in the description as well I actually ran a poll on whether you guys would like to have one big long video or lots of little videos and I was surprised that it was a pretty even split the lots of little videos actually won but I just thought that because it was so close and because of the the topic of this video it would make more sense to have one big long one just with some timestamps along the way so that's what we're gonna be doing the way that works is if you go and look in the description you'll see the time so they're actually linked so if you click on say the the third one down you click on the little timestamp and it's gonna bring you exactly to there in the video so if you don't have time to watch the whole thing at once that's fine because you can just come back later on go oh I was at adding in the pseudo elements and click on that and it will bring you to that part of the video right away so it's little bookmark type II things with all that out of the way I think it's time we get into this let's go rock it now first things first we've got to write some markup luckily it's pretty easy to do for this and you'll notice I am in code pen so the link to this is down in the description below if you want to go and check out my code and play around with it as you follow along in the video or afterwards I do have a little bit of something here this is just a place well there were some actual content will go so we can see what it looks like with content once we've built this out so let's start just by making a nice big header here close header inside my header I'm just gonna use an h1 with a class of logo on it so we can have our logo which I don't actually have one so I'm just gonna write logo in there for now for a little bit of a placeholder for where we could be putting a logo and then we need our actual navigation so I'm gonna come in here and make a nav close my nav off and we're gonna do this with an unordered list because this is what you'll usually find out in the real world so for this we need a list item and in our list item we will be putting in an H ref we have nowhere for it to go now but hopefully you would actually have somewhere for this to be going to and for my H ref the first one can be home a and close ally and just to make my life a little bit easier let's copy this one and paste it in there a few times we have a few different links let's say it's a boat we'll do a blog and we'll do the contact there we go so the main reason again with this is just so we can see what happens sort of when we scroll so it gives us a bit more of a realistic look that's why I added this whole content thing down here and that's it for the markup it's nice and simple there so now with that done we can start codon and up we're going to start with the mobile view and then we'll move up to the desktop screen sizes once we're finished with that so I'm gonna just take this and we don't actually need to be looking at this anymore so I'm gonna bring up my CSS now you'll see that I have some styling here already so up here I'm just ringing my Google font here I'm setting up a CSS custom property or a CSS variable here at the top if you've never seen these I do have a series on how they work but for the very basics of it you'll very easily be able to follow along for this video and once you see me using it I think you'll quickly understand exactly how it works here I have a reset for my box sizing which I do one pretty much all my projects and then I just have some basic styles will hit my content section and just some basic styles here on my body just so we have somewhere where we're starting off with so what I'm going to do is I'm actually going to leave all that at the top there and then I'm going to come down here just because I will be showing this and let's just put in a little comment comment here saying navigation Styles start here and we'll work from here on out so the very first thing I have here is my header so let's style that up so I have my header and right away we're gonna use that variable that I was just talking about so to use it I have to write var and then open and close my parentheses and then I write the name that I created so background and you can see that color that I used where is it right here so this RGB a value is getting brought in right there so this had come in more handy once we start reusing this or if we do decide to reuse it in different places or if we need to change it later on what else do we need to do I want to do a text-align:center on this and I'm going to do a position fixed I've had a lot of questions about how to do this so it's nice and easy to position fixed and then for now I'm just going to do a width of 100% so now if I scroll you can see that it stays there and because I'm using an RGB a value you can see that there is a little bit of transparency in there so we can play with that number a little bit I'm on how transparent you want it but I think that looks nice now one thing because this is position fixed just to make sure that it's always on top of everything we can give it a really nice big z-index something like that and it depends on how you're using your Zend indexes and everything but a nice big number just doing ensure that it's always all the way on top of everything else so that's good now let's actually get inside our header so the very first thing we have is our logo and because this isn't h1 with some text I'm going to say that the margin is 0 on it so actually I don't think I need to style anything on it but if you wanted to just know that the space around it right now is being created by the margin so it is possible that you might want to reset that at one point or change the spacing around it because this is sort of going to decide on how tall our whole navigation is since it's the biggest element inside of my navigation but for now I'm just gonna not even bother putting anything so right now it's starting to look good but my navigation is in the wrong place what do we want is to bring it over to the side here because eventually it will move up and down with a thing that we're gonna click on now I haven't done the markup for that yet I'm saving that for a little bit after I'm just cuz it's gonna make more sense once everything is set up to add that little bit of markup in there we're almost there - so let's go and look at my nav first of all so I always work from the outside in so let's start with the whole nav itself so I'm going to use a position:absolute on this so because this has a position fixed already on it this position:absolute will be relative to where the overall positioning of this is which will make my life a little bit easier I'm gonna do a text-align:left because my text isn't in the middle it looks weird if it's centered off on the side here so let's do a text-align:left on that the tops already I think at the right spot but I'm gonna say top 100 percent so again that's relative to this so if I did like top 50 percent just to look at it the top of this well there's a little bit of margin on the top so of the list itself but the top of this is lining up pretty much with the middle of this and I don't want it to line up in the middle I want to line up underneath that so that's why top we're moving a hundred percent away from the top which is here so a hundred percent of the way down and then let's just do a left of zero so I can control exactly where it's going to be and you'll say it doesn't look left zero we do have padding on here as well because of my nav ul which we'll look at in a second I think that's all we need on there so let's keep going and so let's look at our nav ul next so on my nav ul what do we need we need to do this is where the margin:0 padding:0 and I'll do a list-style:none that gets rid of the bullet points and all of that and now you can see it's actually lining up at the top and it's actually all the way on the side they're good and now we can do my nav Li and on my nav li I want to spread them out so it's at a margin bottom I don't know one M just to spread them out a little bit and I'll do a margin left of one M as well to give it some space on the side here now this is where I did I really need to reset this exactly and this margin here could actually be up on the UL it just depends on how you like to work there's no from I think anywhere in my opinion it's just preference on where you're doing this to move it around but I like just resetting that and then I like positioning my list items sort of like this because when we into the other view we're going to be playing with the margin left as well on these to space them out when they're actually one next to each other instead of on top of each other like this just start making it look a little bit better my nav a so when I have a color let's get rid of it let's make a color white text Declaration of none we could really make the font size a bit bigger font size of one point I don't know to REM something like that that looks a little bit nicer I'll do a text transform of upper case if you've never used MS or REMS by the way I'm there pretty simple to use and I'd encourage you to start learning a little bit more about them I do have a video on that I'll link to it in the description below as well so that looks okay we need a little bit of a hover effect on these though I think so I'll do it nav a:hover so on this I think we'll just change the color say over to black instead of white I know I can't see it now and I just realized I need my background so this background color here I want it to also be down there so that would be on the nav itself I just completely forgot so here we can come in a new background and use my variable background and I guess I'll also need to do a width of 100% there we go cool so that o is I'm pretty happy with how that looks now just to really reinforce why I'm using this variable background instead of just putting the number in so here I have the background and here I have the background and potentially be having it in other places well maybe background wouldn't be the best name and if you were using in other places well let's just say I came in here and I change it in this one spot the color changes in both of them and actually I like that color better so I'm going to leave that alone but let's just put this to zero to really change it so you can see I'm using this color in two different places and by changing it here and this should make it black zero it's changing it in both of them at the same time so that's pretty cool and yeah I think I'm gonna stick with this I like the more vibrant color that I just got by doing that so I'm going to with that also sorry I'm scrolling around but here you know if you wanted to make it no more transparent I could turn it off I could come here to point five and make it more transparent and it's doing every instance of this all at the same time so that's why I set this up here it just makes life a little bit easier instead of trying to remember hex codes or RGB values I'm cool so my menu is there but obviously I can't actually toggle it right now and that's a big part of having a mobile navigation is wanting it to sort of hide and come out so we've gotta have something to click on so this is gonna seem a little bit strange but I'm actually going to come in here and I'm and I had a checkbox and I'll explain why don't worry so input type equals checkbox and I'll give this a class of nav toggle so all that's done is given me this little checkbox here seems a little bit strange and I agree it is at the moment so the whole reason I'm gonna be doing this is because I want to do this without any JavaScript we want to do this CSS only and we can it's not that hard and it's important that I'm putting this right before my navigation with how the doing this with CSS works it's really important on the ordering of these two things so to give you an idea of how this is going to work let's say that my navigation is actually display:none so it disappears cool and I'm gonna scroll down here and what did we call it we called it nav toggle so if you don't know there is a pseudo class yeah pseudo class and you know hover so hover is a pseudo class you probably might know like active and all that there's also another one called checked so checked is looking for if a checkbox is checked and then what we can do is do a little tilde here and say map so what this is saying is as you know if you you don't have a space so like here with my nav this is a link inside my navigation so if I put this it's not looking for a nav inside of Naftogaz it's looking for a nav that's a sibling of nav toggle so my nav toggle is here its first sibling right after it I think it's the first preceding sibling is what this is looking for so it's looking for is there a nav right after there is a nav right after so what can we do with it so display:block so if it's checked my nav which is right after my nav toggle should become block when it's checked like like that there it is if I uncheck it it disappears so right away I think you can see the value in this and I think you get the idea of where I'm going but you don't want a checkbox do you know we don't want to check box we want something that looks like a hamburger menu so let's go and make that and this is me I don't know if the where I'm putting this is terribly important it could be somewhere else but I'm going to put it down here underneath and I'll give this and so I'm gonna make a label here and it's gonna be a label for my nav toggle and I need to give it a name so let's give it a class of nav toggle label and a label I'm going to close my label here and inside of my label I'm gonna add in a span closed path so the advantage with a label and actually in my span for the moment I'll put a big X and I just realized something and doing this so I'm putting my four here when I did my input we also need to give it an ID so the ID of this will also be now a photographer generally when I say generally I always do this where my navigation or my input will have an ID and a class and the reason I like putting both on them is in my CSS I prefer only working with classes and not with ideas just for specificity reasons the IDS are much higher in spy so they can cause some issues with it I know I'm sayin specificity really weird it's a word I have trouble with I have a whole video that dives into it a little bit and you can listen to that if you're curious and just listen to me stumble over it but basically this is for me to select here and my ID here is because I want my label and my input to work together so this nav toggle so for nav toggle is going to look for an ID it will not see it the class so now if I come up and click on here you'll see that it works but if I click on the X it also activates and deactivates it even though I'm clicking on the X and I'm not clicking in the check box itself so what all that means is I can come up to here and say that my nav toggle has a display of none we don't need to have that there I only need to have this so even though we can't see it it's still being checked on and off so it's really really nice and handy but I don't actually want this to be an X we want to do a little bit more with it so let's do all that I'm gonna keep all of this above my now actually actually you know what for now for the moment I think what we'll do is we'll put the X back in here just so we can get it positioned where we want it to so I'll move the x over to here and then we'll change our X into the 3 bars so here I am a nav toggle label so my nav toggle label let's see this is gonna have to be a position:absolute on here because we want to tell it where it's gonna go let's just do a top of 0 and a left of 0 so we should see it showing up there it is so it shows up right there now I want the the let's just give that a margin left of 1 M and the reason I'm doing the margin left of 1 M there is just because I give that margin left of 1 M so I just want these things to line up perfectly now I'm gonna put a border on this just so we can see what's happening so I'm going to do a border of 1 pixel solid red and we can see it it looks like that and I want to be able to Center my X perfectly in this space so I'm gonna give it a height of 100% to do that I'm also gonna give it a display of flex and the reaiiy know we only have one thing in there it's because this makes it easier because then I can use it in the line items center and my X goes right in the middle of the height there so I need to give it the height display flex and then align Adams Center and there's other ways of centering it that don't require flex but yeah that works well so I think we'll leave that and I can turn off my board right now so that's in the right spot but I don't actually want something that's a little X I want my three lines so to do that I'm gonna use the span and I'm gonna use some pseudo elements on the span so that's my nav toggle label span and I'm going to be doing it before and and after on this label span before and my nav toggle label span after so we're selecting all three parts of it we're selecting the before and after pseudo elements as well as the span itself so I'm going to start by giving them a width of I don't know 2m actually before we do that I need to make sure they show up so let's do a display a block on all of these a background white for now and now we can worry about that so height of two pixels and a width and again II guess about two M but that might change two M's gonna be about so yeah there we go 32 pixels so that doesn't look too bad and I'll do a border radius of two pixels just around the corners on that really subtle because it's not very big but I think that'll look a little bit nicer now I actually only have this one showing up right now I don't have the other ones and actually let's just make this like that so we can see what we're doing a little better I'm gonna do a position:relative on here this is pretty much just for my span here the before in the after aren't showing up yet so let's get those to appear so the easy way to do that is to copy this and paste it there and I need the content property and I don't actually want any content but if we don't have this it defaults to none and nothing of it shows up so I need that now you can see that got thicker and it's because they overlap like we have the the three lines now do I need anything else on here I don't think so except I think we're gonna need a position position:absolute I think we're gonna need that so I'm gonna put it on and now I can select these separately so we'll start with my before and let's just move it down to bottom I'm taking a random guess seven pixels good so that moves the bottom seven pixels and so let's take the same thing but I want my after and I'm gonna switch this to top yeah I'm happy with that good good good and when I click that it should appear and disappear and I'm not going to do a fancy animation on all of this if you do want to see an animated one like this where it turns into an X I do have another mobile navigation that I built out that takes a look at that but it uses clip paths and does some other stuff but overall I think that looks pretty good and I'm happy with how it works so that's cool son looks good and it works but we want to make this look not simply good but great we're gonna have to use a few transitions on this puppy to do it because we want to make sort of little animation type of thing so we're news transitions to make those now the thing with transitions is to be as high performance as possible you want to limit your transitions to four different properties opacity scale translate and rotate if you'd like more information on this I've put a link in the description below and if not just trust me on it it deals with repainting and stuff like that that the browsers have to do when you're doing transitions and stuff so let's go and take out our display:none that I put in here before not that one we want to go down onto my navigation so we want to take that display:none out and I want to go and find this one and take that out too because I want it to be here so instead of display:none what I'm gonna do and this is kind of weird but I'm gonna come in here and do a transform scale now the thing with scale is I can put in again number so say I did 50 or about fifty point five it will be half the size it originally was so 0.75 would be 75% and a 1 in here would be the actual size but you can actually put two values in here so if I did a 1 and 0.5 it's gonna smoosh it but up and down but this way is staying at a hundred percent or if we switch that around if I say 0.5 comma one it's the opposite it's gonna smoosh it horizontally but vertically it's staying at a hundred percent so what I actually want to do in this case is I want to give it zero here which is going to crush it all the way down but I want to keep the width at 100% then when we get to here I have a transform scale 1 comma 1 so now it's gonna look exactly the same as we had before so there's actually no difference but the advantage with this is unlike the display:none is I can do a transition on here so if I come in with a transition and let's say transform 400 milliseconds and we'll do an ease in out and see what that looks like so there we go so you can see it's transitioning in and out but obviously we have a problem it's not transitioning from the right spot it's growing from over here and we want it to come down and up from the top hmm well luckily it's not hard to fix on here my transform I can do a transform origin and just right in top so the default was pretty much in the center so now instead it's going to you going from the top cool so already I think that's a lot better but it's not really what we want the links look really funny when they get scaled they're getting like squished and it looks well it looks like poop to be honest we can make the links fade in as the scaling finishes though so instead of squishing like this the link sort of appear into the navigation so remember the four properties that I can do there's scale translate rotate and opacity so we're allowed to do our opacity so let's come down onto here and I'm going to say that my links here have an opacity of zero so now if I do that it just looks like my menus growing and drinking the links are still there we just can't see them because they have an opacity of zero so then on here we can add this so it's my nav toggle checked till the nav space a get any bit more complicated as a selector but that's what we need we need our nav links that are inside our nav that are next to our sibling of my nav toggle when it's checked and these will have an OPA opacity of one so you can see they're there and then they disappear and so it's working sort of but let's go and add in our transition on here so we can do our transition opacity and let's do like 250 milliseconds ease in out but I'm also going to do a delay on this so this is an animation delay so what that means is take this much time before starting my animation so now when I click on this see how the animation when here its own it's just finishing up and then they come in to really illustrate this actually it's just at a zero here so it won't really show that way but when I go this way and then we wait and we wait and we wait and we wait and then eventually they fade in so it's taking two thousand five hundred milliseconds two two and a half seconds then the animation this part kicks in so by having the delay on there just a short delay as it comes in it goes but you'll notice when I shrink it it's still squishing them because the shrinking animation happens right away there's a delay on it so that doesn't quite work luckily we can fix this a little bit so if ever you've done something like adding a transition unto something like this with an Ave and then in a hover whatever and you put the transition here transitions a color you'll notice or you'll notice that the transition only works in one direction but not the other one so what we can do here is this is always on here so there's always this delay but when I click this way I don't want there to be a delay I only want the delay to come when I'm opening it not when I'm closing it so luckily what we can actually do is add the delay here so let's say we do transition actually I want to copy exactly what we have here onto this one so this means when it gets checked and it's opening up we want it to have that delay on it but when we click this and it's no longer checked I want it to be a different one so let's just take out the delay and maybe we could even speed this up a little bit 150 milliseconds because we need to fade out pretty fast before it actually starts getting smushed so now when I click on it this way there's the delay and then it all fades in so it's using this one because it's using the check state but as soon as I click this that's no longer checked so it's no longer checked it's not gonna use this transition it's going to come up and it's gonna use this transition instead so this transition is much faster and there's no delay on it so as soon as I click on this you'll see it's gonna fade out and it's gonna fade out quite fast which is perfect because we don't see it getting smushed and I think our timings are actually really good on this and it looks pretty good I'm really actually happy with this whole thing and how it's looking right now so that's really cool and really fun and there we go a nice simple way to make a drop-down with absolutely no JavaScript involved so it looks great on small screens now but let's make it look good on bigger screens because to be honest you know that looks kind of boring like this and you know we can we we have room for navigation so let's take advantage of all that room and build one in now the width I'm gonna use on I'm gonna make a media query I'm just gonna do it all the way at the bottom so I can put everything in this one media query so the width on this is going to be really arbitrary let's say min width of 800 pixels I'm just using some nice round number you choose the break point that you're using for your design or that works with your navigation layout and everything so the first thing is we don't actually need this thing anymore right so let's turn that off so an avatar --gel label can be a display of none there we go and that little puppy there is gone now the next thing we want to do is we want to set up our header and the header in this case I'm using CSS grid on it so one of the nice things about CSS grid is it has sort of done away with the need for container divs um so let's this up display grid and I'm gonna make I'm gonna make three columns on here um so I'm gonna do grid temp late columns um if you've never used these I do have some videos on these as well I've been saying that a lot I'm using a lot of the things that I've used over time to do this one FR so to explain what i'm doing here is i'm setting up four columns FR is a fraction unit so it's pretty much left over space so I want left over space on the left and right Auto the logo I want it to be in one that's automatically generated and my navigation is gonna go in one I'll say a minimum of 600 pixels px and a maximum one fr I'm wondering if I need to change that so right away you can actually see my logo moved over and I'm going to inspect here I'm using so in the Firefox dev tools there is this really nice grid inspector so if I turn that on we can see the grid lines that are coming up and I'm gonna leave that on for the moment I think just because it's gonna make visualization of what we're doing a little bit easier so you can see that the those lines are right there so as I lay things out I think it'll make a little bit more sense and I think here actually if I click on that I can display my line numbers and stuff which will help make a little bit more sense but I'm gonna leave that off until I set this up a bit more and I'll shrink that down just eveness a bit more room for the moment so I want to say where my things are actually going on the grid so let's just say my logo is going grid column to spend one and now it should move over there we go so now I can put my grid and numbers on because my second one here was set to auto and there was nothing inside it it was just collapsing there was nothing in there so it became zero so that's what just why I'm I didn't want to confuse too much so I have a one two three four five so what I'm saying is I want my logo to start at column two so it's starting it the the line number two and it's going across one I could also do this as just a two over three to make it take those and just for example if I did this as two over four it would take up from two all the way to four but I don't want to do that I want to do two over three and what else do I need to do on my logo I think that's it and then I can come onto my dot my just my nav and that one would be grid column of three over four because I want it to start here and I want it to go up to here now the one problem with this is I can't actually see it and that's just because my nav a currently have an opacity of zero so city of 1 so we can actually see them well actually it's cuz there's a whole bunch of stuff going on and so for my nav here the other thing I'm gonna do I'm gonna see what keeps flashing like that is it as things go now we did a whole bunch of styles on the nav and I don't want to have to undo all those styles that I already did because that's just really annoying so there's this really nice thing I can say all actually I'm gonna do this above my grade columns here I'm gonna say all and on set and look at that I have a navigation again so what this is doing is it's taking off all the things that I did up before when I did the mobile version of it it's just take everything off of my nav so now I can actually see it and it's going on the grid column from 3 to 4 so that is perfecto just as a word of caution the all isn't a fully implemented CSS feature yet I have the time of making this video it won't work in IE or an edge though it is under consideration for edge at the moment so let's come on my nav UL next and say a display of flex on here so they'll go next to each other instead of how they were so there we go third that way I think on here I should be able to do a flex another flex just defy content black and there we go just to move it all the way to the right side um and let's put a border let's just say border one pixel solid red I just want to see what the height of this is right now so on the nav itself again I'm just gonna use this trick display flex which will stretch that out actually that okay we'll do on here just ePHI content flex and and we'll do an align items Center so that should move that over there perfect oh good you can see that there is an extra bit of height here right now that's because my list items have the margin-bottom on them so I can take those that margin-bottom off right now so an Ave Li margin-left let's make it a bit bigger let's say 3 M margin-bottom 0 there we go so they're a little bit more spread out and they're perfectly centered in that space now and just to look at the the one fr thing so the 1i FAR's is taking up like available space and shrinking and actually I realized my min max here actually isn't gonna work properly let's say I make that three I think it'll work a little bit better maybe even has to be bigger oh there we go I think that's working out a little bit better just saying that of the available space so the available space is this so this should try and be about three times bigger than this one or that one yeah that looks a little bit better and then it gets to the minimum width of 600 and then right before we get too narrow look it goes over and then we get our drop down good good good so that's looking pretty good the only thing left that I want to do is add in my little hover effect that we're gonna put in to the navigation here so let's scroll down and I'm only gonna do this on my fullscreen one here so my nav a [Music] before right yeah I know baby four will do it on the before and so as with all pseudo elements we do need to give it a content of nothing or they don't always get nothing but most of the time when they're design em look when they're design elements they always get a 1 of nothing I'll go with a height of like 5 pixels I think that's what I used last time a background of black so that we can see our line is already there let's give it a position of absolute which will break it do to do because let's just give them top of negative one M let's see where that puts it left of zero or right of zero let's see what happens now and position relative on here there we go okay that brought them back good good good had me a little worried there let's make this a bit smaller 0.75 either bigger or smaller but I think it worked out well where I have it now and I'm going to use the exact same trick I used last time so before and when I say last time I mean I'm gonna use the same trick I'm gonna get rid of these grid lines and everything this trick here where we use the scale to smoosh and grow things since it's a nice little way of getting it so on here I can bring in a transform scale the last time we did a 1-0 because we want to do shrink the height this time I want to shrink only the width of it so I'm going to do a zero comma one and we might as well add the transition in right away transition transform ease in out I don't know 250 milliseconds and we'll see how that looks and so then my nav a:hover before transform a scale 1 comma 1 and let's see look at that isn't that nice it works out perfectly so when I hover it's growing now last time I did this I when I was using transitions on the left and the right and you saw if I wanted it to grow from the center I had to do like a 50% 50% thing and then like it was a bit more complicated and if I wanted to move it around so the nice thing now is if I do want to change this I can just do a transform originally we did before origin left and then my line will grow in from the left right you put right and it will grow in from the right and if you want it instead of being on the top you want it to be on the bottom that you do bottom and now my line is coming in from the bottom so I'm gonna put that back to the top and I'm just going to take this off because I sort of like this one that's growing out from the middle like that so we'll leave it just like that whoo that was a long one but we made it and I think it was worth it I'm pretty happy with the end result but if you have any suggestions on things I could have done better or just questions about my process or anything like that please leave a comment about it in the description below also if you have any suggestions for other videos feel free to leave those I love getting them I have a really long to-do list now but it's all from you guys suggesting stuff that you'd like to see so if you have a cool idea I'd gladly add it into my list well I have to your attention and just in case you don't know I do also have a newsletter I started it a few maybe about a month and a half ago it comes out every single Sunday but instead of big long videos like this it's little short snippets I like to think of it as the the things I don't have that don't have enough substance to them to make an actual video about so hopefully things you can read in 3 minutes or less for the most part mostly CSS tips and tricks type of stuff and maybe a little bit of design thrown in there as well an example I haven't done one on this but just the whole all property with the onset there that would be the type of thing just focused on that that I would make a newsletter about so if that sounds interesting to you you can go check out the link to that in the description below if you haven't yet subscribed to this channel you just watched a really long video you're still sitting here through the outro props to you really you know so hopefully you like the content I'm guessing it you did if you're still here so just please consider subscribing it's a new video like this every single week so hit that little subscribe button and I look forward to seeing you in the future before we wrap this one up just a really big thank you to all my patrons it's through your support that at all of these videos are possible so just thank you so much for showing the faith in me to support me I really really do appreciate it well just a big thank you to everybody honestly this channel is getting bigger and bigger all the time and just you guys are all really awesome so thank you so much to everyone and don't forget until next time to make your corn in the internet just a little bit more awesome

Channel: Kevin Powell

Views: 284,147

Rating: 4.9572806 out of 5

Keywords: Kevin Powell, tutorial, html, css, navigation, html navigation, css navigation, responsive navigation, navigation flexbox, navigation grid, responsive navigation menu, navbar, html navbar, responsive navbar, mobile navbar, mobile navigation, how to make a responsive navigation, how to make a navbar

Id: 8QKOaTYvYUA

Length: 44min 13sec (2653 seconds)

Published: Wed May 16 2018