Styling our responsive navigation menu

Hi there,

In this video, we're going to look at styling our burger menu, along the top here, because at the moment it's looking a little like that. We need to make it look like this, so there's some fonts to do, there's some styling of the burger menu, there's some text to add and remove, and make it look pretty.

So, let's go do that now in Dreamweaver. First things first though. We need to tidy up a little bit. We've just kind of furnished it together, which is being great, but we need to add some kind of core structure in. 

So, we've got our body text, and inside of that we've got our menu, and that's about it. This is the Javascript hiding down the bottom. What I'd like to do is, we need to put in a kind of a framework, and to start with, it's this thing, called a 'header'. So, I picked 'header', and closed it off. I'm going to open up the angle brackets (< >), and put the slash (/) in. You see, it automatically filled it up. So, that's my header, and everything for your heading is going to go in there. So, if I look at my mock-up, this thing here, so this chunk here is going to be considered my header. So, think, logo-nav, that's pretty much all that goes up in there, and maybe a phone number. 

So, that's going to be my header. So, inside that, there's this guy. That's for my navigation. So he goes inside the 'header'. And this is just really good. This is really common to do this. There are some perks, but it's mainly just really good html5 syntax. Let's go across.

So, we've got a 'header'. Then everything else in the middle, your kind of main content, let's call it 'main'. Close it off. And go back, it's forward slash (/), and that's going to be everything that is in this site. That's going to be pretty much all of the sites. So it's going to be this box here, and these six. Now we don't have a footer on this design, purely just to speed this tutorial up. But you would have a footer in here as well. Everything would go in footer. And often, that is the basic structure for most of the sites. We're not going to have a footer, so we're going to leave it off.

So, we're going to work on this header. And, in my design there, there's a logo first, so we need to put that in. It's before my list, on our menu. So I'm going to put it above it. I put lots of returns in, some people do, some people don't. I'm going to put in an image now. Image, and image tag are quite a long ones to type, so image, put 'src'. There's lots of things that go into it, so we're going to use our sneaky shortcuts from Dreamweaver. So, just type in 'img', and then hit 'tab'. Hey, presto!

Now we're going to start typing 'img' for our images folder. Hey, presto! Nice work by Dreamweaver. Click 'enter', and there's nothing in there, because we've got an empty folder. So, what we're going to do is, we're going to go and click ‘browse’, and you're going to find-- on the desktop, we're going to find the files that you've downloaded, the exercise files. If you haven't, check out, there's a link somewhere in here. And, in my exercise file, I've got an images folder, and in this images folder, I've got that ‘Bring Your Own Laptop’ logo. Click 'open'. Let's hit 'save'. And last thing we do when we add any sort of image, is we need to add this alt text, or alternative text. 

It's just the text that appears if the image doesn't load, we just use lots of things, screen readers, and also, Google uses it to identify what's on the page, so it's really important to add alt text. This one is the ‘Bring Your Own Laptop Logo.'  Where is it? Let’s have a look. Let's have a look at our preview. Here it is now. Nice. Just sitting in the corner. That's great! We've got our image in there. Let's now move on to styling this menu.

First up, let's make it three-buttons, so I'm going to get rid of that guy, and my different things here are going to be, 'Portfolio'. There's going to be 'About Me', and 'Contact Me'. So now, it's nice, perfect. And, the next thing we're going to do is get it to flow to the right, because at the moment, sitting underneath here, we need to get it over this right hand side. And that's pretty easy. We're going to go to our 'css'. And, we've done it before. Remember our menu, we sit down the bottom. Remember this menu is those blue lines at the moment, so we're going to stay up here on my desktop view, and I’m going to put lots of returns. I love my returns. Just to keep it all separate. And I'm going to stay up here, and I'm going to say 'menu'. I would like you, curly braces ‘{ }’, to float, and I'd like you to float to the ‘right’, please. Remember that semicolon ‘;’. 'Save'. Let's have a look. Bingo!

Next of all, I want it to stack side by side. If you look at the finished version, I want it to stack, kind of next to each other, rather than the default underneath. So, let's go and do that. To do it, what we need to do is, have a look at our source code here. We've got this one, we've got this list items, our ‘ul’ is an unordered list, which is a bullet-point list, and here's the ‘li’s in that list, so this is that kind of overall list, and these are the different attributes in this list, so, different bullet points, so, these are the list items.

So what I need to do in this case is, I need to say-- I like to say-- we're going to do what's called compound selectors. We're going to say, I want to find menu item, our list items, so 'li's that are inside menus. I want these guys, if they are inside this menu here, I'd like you to do this thing called 'display'. And we've used ‘block’, and ‘none’ before, we're going to use this one called, 'inline-block'. Remember, block is up here, and inline just means just getting that nice little line there. Hey! Awesome!

So, next thing I want to do is, I'd like to style them, because they're looking a little bit sad, with the blue underlines, and things like that, so let's go and do that. So, to do this part, what we need to do is, be a little bit more specific. So, what we need to do is, style these ‘a’ tags which is my hyperlinks that are inside the lists, which were inside my menu. So let's go and do that. So, another compound selector. So, menus, here we go. So, these hyperlinks are ‘a’ tags. They’re inside our lists, they happen to be inside this menu. I'd like you, curly braces '{ }' to do a few things. The first one is text decoration. Let's go in about text decoration, is the underline. We're going to go to 'none'. You can see, you can add lines through, and over-line, and underline, so we're going to get 'none'. Semicolon ';' Hit 'save'. Go to check it. Hey, underlines are gone. Nice!

Next thing is, let's change the color. Let's go to you guys, and I'd like to say-- and if you type 'color' just by itself, it means the font color. You can use your color picker, but I am going to type in '4e4e4e', that’s dark gray. Remember, at the end, make sure there's a semicolon ‘;’ 'Save'. Let's have a look. Great! What I might do just to make things a little easier while we're styling it. Yeah! So we can see both of them. Great!

And, next thing I need to do, just give them some padding, so I'm going to go 'padding', and if I go padding 8 pixels '8px'. You see, if you leave 8, you can see it's going to do the top, right, bottom, and left, all the way round, which is great for me. It's what I want. And what I want to do is, go and change the fonts. Now, I could definitely go and change these fonts. I could type 'font-family', and go and do it here, and pick one. You can see it changed in the background there. But I'm going to have to do this, say I want to pick up a font for my website, and let's say, it's Arial, or Times New Roman, or something, and I'll have to reiterate this every time I put it in a text, so what we’re going to do, is we're going to do something sneaky. We're going to say, for global, go to desktop. I put it at the top here because it's kind of like a big overall thing. We're going to use this thing called the 'body' tag. 

Now, the body is-- we're looking at our html css. Body is everything on the page. So what we're going to say is, all the fonts that are on this body tag, inside this body tag, I want you to be this font, and this means everything, This 'a' tag, any headings we put in, it's all going to come along to the right. We're going to write it later on, but I want to say, buddy, I would like you to have a font-family of-- and I'm going to use, I'll use at the moment, Gotham, Helvetica, Arial, Sans Serif. We'll talk about fonts a little bit later, because these basic ones aren't very cool. We want to use our own fonts, but we'll save that for the video after this one.

So, font-family, we're going to use this, and here's my little fonts in the background. Great! So, you can see here, it's just a little easy than trying to write it every single time we put in the text, and we're just putting it here for the overall global. What we might do here now as well, is we’ll do font size. So, font size, we'll make it-- and I'm pulling these sizes from Photoshop, so I've got my mock-up, and I'm just going in, and kind of checking. I'm going to do 18 pixels, ‘18px’. Great! It’s a little bit bigger. Lovely! Let's hit 'save'. Let’s have a look.

So, next thing I might do is, there needs to be a better padding around this heading, or this header tag. I could pad this a little bit more in the image separately, but because they're all inside this-- let's have a look. We're inside this thing called ‘header’. I can just add a bit of code, the css to this header, and just to pad it up, save everything inside to get some padding. So, what I'll do here is, down the bottom here, I'm going to say 'header', and curly braces '{ }'. And I'd like to say, 'I'd like some padding, please.' So, we'll do 'padding-top', and maybe the top is 10 pixels, ‘10px’. I say, maybe, I already picked this out. It's been ages. Going over, and deciding how big. So, yours been a little bit more time in here, kind of go back to your Photoshop dock, and deciding what looks good. So, I've got padding on top left. And, 20 pixels, ‘20px’ Now, I'm doing it the long way, I know. So watch this. We're doing it this way. 20 pixels, ‘20px’. Great!

What you'll find is, a lot of people just do this, we're done top, bottom, left, and right, and that's great when you're learning, because it's nice and easy, but watch this.

If you do padding, and it assumes top first, so if I put in 10 pixels, ‘10px’, and put a space. Can you see the little hint there, So, it goes around clockwise. So next is the right, and everything else at 20. So, 20, 20, 20. So it's doing the exact same thing, semicolon at the end, so this goes, top, right, bottom, left. Have a look. Yes, it's got a little bit of padding around it now. Lovely!

The next thing is, we need to fix up our tablet view, so watch this, we get down to tablet, and it kind of just gets all stuck in there, so what I've done, in the mock-up, and that is, I've got it to do this, and then it gets down to that lovely kind of stack on top. So let's do that. So what I want to do is, when you get to tablet, my friend, I would like you to collect the menu. We did it up here; we went in line-block, which stacks them next to each other. So what we're doing is, we're turning it back to what it was. I’m going to use it here. And, it's just the one that says 'block'. Save it. Let's check it in the browser. Great! We got our little bit of padding underneath to it, but because we haven't got our perfect font yet, we're not going to do that yet. We'll do that a little bit later.

One other thing that I want you to do is I want it to align right. So I'm going to go 'text-align', and I want it to the 'right'. So when it gets down to tablet, let's check it out, it's aligning to that right hand side. 

Now the big thing to change is our burger menu, because it gets down here, and hey, I'm giant, and gray, and I've got this big menu even though I felt like everyone knows that that's the word for menu, but I love that he’s left the stuff in here, so if you do need it, it's easy to take out, harder to put in, so let's first of all get rid of the word ‘menu’. We're just going to use this, just want three lines here, so let's go and do that.

So, where is that word menu? It took me a little while to find this as well, so it's not in your html, it's not in the css, it's not in our slicknav css, it's not in the jquery, it's in this one here, called jquery.slicknav.js. And there's a few things in here. We're not going to change a whole lot of stuff in here, there are some values that you might play around with, but this is the label that I want. I'm just going to leave mine, but you can see, I can adjust this one, if I put in my name, you'll see that it's this guy here. So, I'm going to get rid of this, and leave all the rest. 

Great! Let's jump back to source code. Let's check it out here. Great! Nothing in there. Next up, we're going to get rid of this big giant gray box, so what I'm also going to do is, I'm going to stick this over here, because I'm working on mobile here, and I can fit it in, so I can make some adjustments. Now, this big gray box here. How do you know what this big gray box is? So, in our html, there's only a few things, and our styles have only a few things. There's this other css, called slicknav, and it's going to be in here. 

So, this is the style that Josh has made to style all these bits, so we need to change them. They're all in here. Now, first of all, just because the way this was created, it's not really looking as good as how I like it, and nothing is as I've tabbed in, and there's no space in between, so, a nice little feature in Dreamweaver, that if you do a 'select all' the text, and there's an option over here that says, 'Format source code'. Click over there. It says, ‘Apply
Source Formatting’, and it just tidies things up. Can you see? Makes a little bit easier for me to work out where I'm at.

So, I've got this, Now I want to work out what this gray bar is. And, what you'll do, as our web designer, is you'll go and-- so, we're using Chrome here to display it, right? And preview in browser. And what you do is, in Chrome, you 'right click' it. There are options for the same thing in Firefox, and Safari, and Internet Explorer, but use Chrome. 'Right click' anything, and go to 'Inspect'. And what it'll do is, can you see it's highlighted it, and it's told me it's this div called-- I'll 'right click' it again, say 'Inspect'. It’s this div called slicknav menu. And it's telling me a few things, but what I'm looking for is-- it's a little high because we're on the small size, it gets a bit bigger if you want to. Drag it out there. You can see over here, and, you see this background color. Now if I turn that-- actually I have to go down again. That's this guy here. He is, that background color, and that there is slicknav.css. And it's telling me that it's aligned on line 64 of the css. It's controlling it. 

So, if I go in here, if I go into slic-nav, and I go down to line 64. I might be lying. 64, sorry, 94, and do this one in here, and it says 94, slick menu, and you can see there, it's the gray color. Lovely!

So you use this bit quite a bit. One of the in the hell is that, what controls it, and you can look in here, and it tells you what line in the css it does. So I'm going to grab this whole line, and just bin it. Great! It's working. The gray box is gone, The color is gone, but it's still kind of pushing this logo down. I want you to slide up there. So what we can do, is this menu here. We can say 'float' to the ‘right’, please.

And you can see, when it floats to the right, it kind of opens up a space for this guy to slide into. Great! Let's hit 'save'. We're getting there. Next, let's go and change this to the color, so over here, we've got this lovely red box, and you'll notice there're no rounded corners, and there's no rounded corners on the line. I know it's a really minute detail, but I'm not into the rounded stuff. Nobody is at the moment. It’s all about square edges.

So, let's go into them, and close down this bit. And let's jump back into our css. I'm not going to keep going off, and try to use it inspect to try and figure out what classes are being used. I've done it already. You can fiddle around with it. I know that it is something around here, it is, I come by, it is this thing here. This thing called nav-slick button. And it's got this thing called border-radius. I don't need all the border-radii. Good bye! Save it, you see. Hey, gone. There's text-shadow, that was for-- may be we had the word menu there, doesn't mean to be there. Text decoration is the underline, we don't need that either. And this background color, I want to change, for one of my official file, now it's nice and red. Let's hit 'save'. And the last thing I want to do is, get rid of my-- these little white lines that we've rendered round the corners on the edge. I don't know why I don't like them so much. And it's this thing here. So, all of you guys-- so, 'slicknav.slicknav_icon-bar' If you've done, it's on line 43. It'll be all in there. Lovely! Hit 'save'. And look, nice square buttons. Great!

So, last thing I need to do is-- it's working, but my little menu here is-- I've got red as the background color, but you can see, these guys can't be seen when they're dropping down, because I've removed that background color, so what we need to do is, we need to style these buttons a bit better. So, let's go and do that.

Let’s find our little friend, it's line 134, 'slicknav_nav a'. And in this one here, there's no background color, so color, remember, will style the font. So, a white font in a white background with no background color. So we need to add a background color. So, background-- background color. There you go. And, I've got a color I want to use. It's 'f1474c' Lovely. Semicolon ';'. Hit 'save'. And now, we go in here, click it, hey, the background color.

Now, what I really want to do is play with the padding, and the font, and the hover. But we're not going to worry about that. You can spend some time, so you just go into this, exact same class. Play around. You can see the padding here. I'll increase it. We really don’t want to do it, but it will save some time somewhere.

The one thing you want to do is, you could spend ages playing with the hover, but don't sweat at it, because, imagine you're on a phone, there is no way to hover. So nobody ever sees these hover ones. So, don't bother doing the hovers; you can if you like. And let's close it back up. Lovely. Let's hit 'save'. 

And that my friends is how we make a responsive menu. So, the big version on our desktop. We want to get it smaller, to tablet. Okay. Close down, and bright lines stacks on top of each other. I know the font's not the correct one yet, and when you get down to desktop, sorry, mobile, and it switches to burger menu. Now, these are probably too small, they need padding. You got to make sure one of the things to do when you are making mobile stuff, is that, especially Google. Google will check your site to see whether these buttons are clickable, they've got methods of seeing if these touch points can actually be touched. They're too small, like my Dad with giant fingers, and you hit four of them at one time, you're going to make sure there's enough padding, and all the buttons are big enough that people can clearly hit them. It's part of some ranking stuff that Google do. 

But, good work. We've styled it. You can style it as you want. You can add or remove colors, and fonts, and styling things, but, good work then, we've used somebody else's, lovely Josh's slicknav, to do a lot of the hard work, mainly just the Javascript, and yes, we've gone through, and made it our own. High five thing. 

Next what we'll do is, we'll look at getting serious about our real-time preview, and previewing it on our mobile phone, because it is a bit tough doing this kind of slide thing here, so let's go do that in our next video.