Hi there. In this video we're gonna look at styling our burger  menu along the top here. 'cause at the moment it's looking a little like that. Okay? We need to make it look like this. So there's some fonts to do.

There's some styling with the burger menu. There's some text to add and remove and make it look pretty. Okay? So let's go do that now in Dreamweaver. Okay, first things first though,  we need to tidy up a little bit. We've just kind of thrown this  together, which has been great.

But we need to add some kind of like core structure  and, okay, so we've got our body tag. Great. And inside of  that we've got a menu and that's about it. There's some JavaScript hiding down the bottom. What I'd like to do is we need to put in a kind  of framework, okay? And to start with, it's this thing called a header.

Okay? So I picked header, closed it off. I'm gonna open up the angle brackets and put the slash in  and you see it automatically filled it out. Great. Okay? So that's my header  and everything for your heading is gonna go in there.

So if I look at my mockup, this thing here,  so this chunk here is gonna be considered my header. So think logo, nav,  that's pretty much all that goes up in there. Maybe a phone number. Okay, so that's gonna be my header. So inside that is this guy. Okay, that's what my navigation.

So here goes inside header, okay, this is just really good. Um, it's just  really common to do this. Okay? There are some perks,  but it's mainly just really good. HTML five, um, syntax. Let's go across.

Great. So we've got header, then everything else in the middle,  you kind like main content. Let's called me nice, close it off angle brackets  and forward slash okay. And that's gonna be everything that is in this site. That is, it's gonna be pretty much all of the sites. It's gonna be this hero box here and the six.

Now we don't have a footer in this design. Purely just a speed this tutorial up. Okay? Um, but you would have uh, a footer in here as well, okay? And everything would go in footer  and often that is the basic structure for most of the sites. Okay?

We're not gonna have a  footer, so we're gonna leave it off. So we're gonna work on this header. Um, and in my design there, there's a logo first. Okay? So we need to put that in. So it's before my list, okay.

Or my menu. So I'm gonna put it above it. I put lots of returns and some people do, some people don't. Okay, I'm gonna put in image. Now Image, an image tag is quite a long one type. So image.

And you gotta put SRC  and there's lots of things that go into it. So we're gonna use our sneaky shortcuts from  um, Dreamweaver. So just type in IMG and then hit tab. Hey presto. Now we're gonna start typing IMG for our images folder. Hey Presto, nice work.

Uh, Dreamweaver, click enter  and there's nothing in there, okay,  because we've got an empty folder. So what we're gonna do is we're gonna go click browse  and you're gonna find on the desktop we're gonna find the  files that you've downloaded, uh, the exercise files. If you haven't, um,  check out there's a link somewhere in here. Okay? And in my exercise file, I've got an images folder. And in this images folder I've got the binger laptop logo.

Okay, click open. Cool. Uh, 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,  it gets used for lots of things, screen readers. And also Google uses it to identify what's on the page.

What's really important to add old text. This one is the bring your own laptop. Let it go. Okay, where is it? Let's have a look. Let's have a look at our preview.

There he is there. Nice. Just sitting in the corner. Okay, so that's great. We've got our image in there. Let's now move on  to styling this menu.

Okay, first up, let's make it uh, the three buttons. So I'm gonna get rid of that guy  and my different things here are gonna be portfolio. There's going to be about me and contact me. Contact me. Great. Switching out.

Nice. Perfect. Okay. And the next thing we're gonna  do is get it to float to the right. 'cause at the moment it's sitting underneath here. We need to get it over this right hand side, okay?

And that's pretty easy. We're gonna go to our CSS  and we've done it before. Remember our menu we see down the bottom. Okay? Remember this menu is those blue lines at the moment. So we're gonna say up here my desktop view,  I'm gonna put in lots of returns.

I love my returns. Just keep it all separate. Okay? And I'm gonna say up here, I'm gonna say T menu. I would like you curly braces to float  and I'd like you to float to the right. Please remember semi colon save.

Let's have a look. Bingo. Okay, next wall. I want it to stack side by side. If you look at the kind of finished version, I want it  to stack kind of next  to each other rather than the default underneath. Okay?

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 these list items. A UL is an unordered list, which is a bullet point list. And here's the allies in that list. So this is the kind of overall list  and these are the different attributes in this list. So different bullet points.

So this is the list items. So what I need to do in this case is I need to say, I'd like  to say we're gonna do what's called a compound. Select this. We're gonna say I wanna find  menu item A list items. Okay? So the allies that are inside menus.

So I want these guys, if they're inside this menu here,  I would like you to do this thing called display. And we've used block and none before. We're gonna use this one called inline block. Okay? So remember blocker is a peer  and inline just means they get into a nice  little line there. Hey, hey, awesome.

Cool. So next thing I wanna do is I'd like to star them  'cause they're looking a little bit sad, okay? 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. Okay?

So what we need to do is style these A tags, okay? Which is my hyperlinks that are inside the lists, okay? Which are inside my menu. Okay? So let's go and do that. So another compound selector.

Okay, so menus. So here we go. So these hyperlinks, these A tags that are  inside lists that happen to be inside this menu, okay? I would like you curly braces to do a few things. The first one is text decoration. Let's get rid of that.

Text decoration is the underline. We're gonna go to none. You can see you can add lines through and overline  and underline as we're gonna go to none semicolon. It's save, go check it. Hey, underlines are gone. Nice.

Next thing is let's change the color. So let's go to you guys and I would like to say you, um,  and if you type color just by itself,  it means the font color, okay? You can use your color picker. But I am going to type in for  E four. E four E, okay? Just a 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. Just so you can see both of them.

Great. And next thing I need to do is give them some padding. So I'm gonna go padding  and if I go padding eight pixels, okay,  you see if you leave eight,  you can see it's gonna do the top right bottom  and left all the way around it, which is great for me. That's what I want. Okay? And um, what I wanna do is go and change the font.

Now I could definitely go and change this font, okay? 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 gonna have to do this like say I wanna pick a font  for my website, um, uh, you know, and let's say it's aerial  or times Roman or something. Um, I'd have  to reiterate this every time I put a bit of text. So what we are gonna do is we're gonna do something  sneaky, okay?

Is we're gonna say for global or for desktop. I put it at the top here 'cause it's kind  of like a big overall thing. We're gonna use this thing called the body tag. Okay? Now the body is, we look at our H tm,  LCSS body is everything on the page. So what we're gonna say is all um, you know, the fonts  that are on this body tag, inside this body tag, I want you  to be this font and it just means everything this a tag,  any hittings we put in,  it's all gonna come along for the ride.

We can override it later on. But I wanna say body, I would like you to have a font family  of, and I'm gonna use, I'll use in the moment, uh, Gotham,  Hal Vica, ariel san. We'll talk about fonts a little bit later  'cause these basic ones aren't very cool. We wanna use our own fonts,  but we'll save that for the video after this one. Okay? So font family, we are gonna use this  and there's my little fonts in the background.

Great. So you can see here it's just a little easier than  trying to write it every single time we put in any text in,  we're just doing it for the overall global. What we might do here now as well is we'll do font size. So font size will make kids,  and I'm pulling these sizes from Photoshop. Okay? So I've got my mockup  and I'm just going in and kind of checking.

Um, so I'm gonna do 18 pixels. Great. It's a little bit bigger. Lovely. Is it save? Okay, have a look.

So next thing I might do is there needs to be a bit  of padding around this heading. Okay? Or this header tag. Okay? I could pad this out a bit more in the image out separately,  but because they're all inside this, uh, let's have a look. We're inside this thing called header.

I can just add a bit of code, um,  but CSS to this header just to pad it out so everything  inside of it gets some padding. So what I'll do here is down the bottom here,  I'm gonna say header, okay? And curly braces. Okay? And I'm gonna say I'd like some padding please. So we'll do padding, uh, top.

Okay? And maybe the top is 10 pixels. I'd say maybe I've already picked this out. Okay? I spent ages going over and deciding how big and that is. So you'll spend a little bit more time in here kind  of going back to your Photoshop dark  and deciding, you know what looks good.

So I've got padding top left, um,  20 pixels. Now I'm doing it the long way. I know, okay, so watch this, we're doing it this way. 20 pixels, great. What you'll find is a lot of people just do this. We've done top, bottom, left and right  and it's great when you're learning 'cause  it's nice and easy.

But watch this, let's get cleverer if we do padding  and it assumes top first. So if I put in 10 pixels  and put a space in, can you see the little  um, uh, hint there? Okay, so it's, it goes around clockwise. So next is the right and everything else is 20. So 20, 20, 20. So that's doing the exact same thing.

Semicolon at the end. So it just goes top right,  bottom left, have a look. Yeah, it's got a bit of padding around it now. Lovely. The next thing is, 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 mockup remember is I've got it  to do this and then it gets down to  that lovely kind of stacked on top. So let's do that. So what I wanna do is when you get to tablet, my friend,  okay, I would like you to like the menu, okay? We did it up here, we went in line block, which stacks them,  um, next to each other. So what we're doing is we're turning it back to  what it was I'm gonna use you. Come here and it's just the one that says block.

Okay, save it, let's check it in the browser. Okay you and boom, great. We could add a bit of padding underneath to it, but  because we haven't got our perfect font yet, um,  we're not gonna do that yet. We'll do it a little bit later. Cool. One of the things that I wanted  to do is I wanted it to align, right?

So I'm gonna go text align and I want it to be right. So when it gets down tablet, let's check it out. It's aligning to that right hand side, okay? Now the big thing to change is our burger menu. 'cause it gets down here and hey, I'm giant and gray  and I've got this word menu even though I feel like everyone  knows that that's the word for menu. But I love that he's left this stuff in here.

So if you do need it, okay, you can, you know, it's easy  to take out, it's harder to put in. So let's first of all get rid of the word menu. We're just going to use this um, just on three lines here. So it's gonna do that. Okay? So where's that word menu?

It took me a little while to file it as well. So it's not in the H tm L it's not in the Cs s it's not in  the slick nav css, it's not in the jQuery,  it's in this one here called jQuery slick nav js. Okay? And there's a few things in here. You're not gonna change a whole lot of stuff in here. There's some values that you might play around with,  but this is the label that I want.

I'm just gonna leave mine. But you can  see I can adjust this one. If I put my name, you'll see that it's this guy here. Okay? So I'm gonna get rid of this and leave all the rest. Okay, great.

Let's uh, jump back to source code. Let's check it out in here. Great, nothing in there. Okay, next up, uh, we're gonna get rid  of this big giant gray box. Okay? So what I'm also gonna do is I'm gonna stick this over  here 'cause I'm working on mobile here  and I can fit fitted in.

Okay nice. So I can do some adjustments. Now this big gray box here, how do you know  what this big gray box is? Okay, so in our H TM L there's only  a few things in our styles. There's only a few things. There's this other CSS called  slick nav and it's gonna be in here.

Okay? So this is the styles  that Josh has made to style all these bits. So we need to change them. Okay? So they're all in here. Now first of all, just  because the way this was created, it's not really looking  as good as I like it.

Um, not things aren't tabbed in  and there's no space between 'em. So a nice little feature in dream  where if you do a select all the text, okay? And there's an option over here that says, um, format,  source code, click on it there  and says apply source formatting and it just ti things up. Can you see? Makes it a little bit easier for me  to work out where I'm at. Okay?

And fine, you don't have to do that. Um, so I've got this now I wanna work out  what this gray bar is  and what you'll do is a web designer is your go. And so we are using Chrome here  to display it right in preview browser. And what you do is in Chrome is you right click it. There are options for the same thing in Firefox  and Safari, um, and Explorer, but use Chrome, um,  and 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 write,  click it again, say inspect,  it's this diviv called slick nav menu.

Great. And it's telling me a few things  and what I'm looking for is it's a little hard  'cause we're in this small size, it gets a bit bigger  if you wanna drag it out there. But you can see over here, um,  you can see there's a background color  and if I turn that I actually have to go down again. Yeah. Okay. So if, uh, that's this guy here, okay?

He is um, that background color  and that there is slick nav css. Okay? And it's telling me that it's a line on line 64  of the CSS is controlling it. So if I go into here and I go to slick nav  and I go down to line, is it 64? I might be lying. Nope.

64. Ah sorry. 9 4 9 4. And there's one in here and it says nine four slick menu  and you can see there, there's the gray color. Okay, lovely. So you using inspect quite a bit,  you're like what 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 gonna grab this whole line in, just spin it. Great. So this is working, okay, the gray box is bar,  so the color's gone  but it's still kind of like pushing this logo down. I want you to slide up there.

So what we can do is this menu here is we can say  float to the right please. Cool, spell it right. And you can see when he floats to the right kind  of opens up a space for the sky to slide into. Great. Is it safe getting there? Next let's go and change this to the color.

So over here we've got this lovely or is he uh, red box. Okay? Um, and you'll notice that there's no round corners  and there's no round corners on the lines. 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 and do that and I'll close down inspect. Um, and let's jump back into our CSS. Okay? So I'm not gonna keep going off  and trying to use inspect to figure out  what classes are being used. Okay? I've done it already.

You can fiddle around with it. Uh, I know that it is something around here it is Icon bar. Here it is this thing here. This thing here called uh, nav slick button. Okay? And it's got this thing called Border radius.

I don't need all the border radiuses. Goodbye. Okay, save it. You can see hey gone. Uh, there's text shadow. That was for, remember we had the word menu.

There doesn't need to be there. Text  decoration, there's the underline. We don't need that either. Uh, this background color, I wanna change, okay? The one from my Photoshop file. Now it's nice and red save.

And the last thing I wanna do is get rid of my God,  it's hard to see these little white lines have render,  uh, rounded corners on the edge. Dunno why I don't like them so much. Okay? And it's this thing here. So all of you guys here,  so it's slick nav dot, slick nav icon bar. If you've done it's online, uh, 43 little bit.

All that don't need any of you guys. 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, whoop,  my little menu here is I've gotten rid  of the background color, but you can see these guys can't be  seen when they're dropping down. Okay?

'cause I 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. I found a little friend,  it's line 1 3 4 slick nav. Nav a, okay? And in this one here, there is no background color.

So color, remember we'll style a font, okay? And it's a white font and 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.

Okay? It's F1 4 7, 4 C. Lovely. Hit save. And now go in here, click it. Hey, you've got a background color.

Now  what I really wanna do is play with the padding and the font  and the hover. Okay? But, um, we're not gonna worry about that,  that you can spend some time. Okay? So you just go into this exact same class playground. Can you see the padding here?

I'd increase it. I really wanna do it, but I gotta save some time somewhere. Okay? The one thing you won't do is you could spin ages  playing with a hover, but don't sweat it  because imagine you're on a phone,  there is no way to hover, okay? So nobody ever sees these, um, hover ones. Okay?

So, um, yeah, don't bother doing the hovers. You can if you like. Let's close it back up. Lovely save. And that my friends is how we make a responsive menu. So tda, big version, okay?

On our desktop, but when it gets smaller to tablet, okay,  it curls down and bright lines  and stacks on top of each other. I know the font's not the quite one yet. And then it gets down to desktop, uh, sorry, mobile  and it switches the bigger menu. Okay? Now these are probably too small  and you padding, okay? You've gotta make sure one of the things  to do just when you are making mobile stuff is  that especially Google, Google will check your site  to see whether these buttons are clickable, okay?

They've got methods of, um, seeing if they,  these touch points can actually be touched. So if they're too small and you have like, uh, like my dad  with giant fingers, okay  and you hit like four of them at one time,  you gotta make sure there's enough padding. Um, or the buttons are big enough  that people can clearly hit them, okay? It's part of uh, some of the ranking stuff that Google do. But good work, we've styled it. You can style it as you want.

You can add and remove um, colors  and fonts and styling things. But um, good work man. We've used somebody else's lovely Josh's slick nav  to do a lot of the hard work. It's mainly just the JavaScript, okay? And yeah, we've gone through  and made it our own High five team. Next what we'll do is we'll look at getting serious about  our realtime preview and previewing on our mobile phone.

'cause it is a bit tough doing  this kind of slide thing here. So let's go do that in the next video.