Styling our hamburger menu & getting our ul menu to stack side by side.

Hello, lovely Dreamweaver people. In this tutorial we're going to transform these ugly bullet point navigation buttons into these good looking red and green ones. Ignore the font, the fonts were ugly. We'll do that in the following video. But let's do the buttons now.

So first thing we're going to do is get rid of these ugly bullet points. We do that by styling this thing here. What thing do we style? We're going to style the Li, which is in the ul, which is in my Desktop view. So let's go and do that now, 'CSS Designer' panel. Do it in my styles.css, I'd like this to appear Globally. And let's click on 'Selectors'. Now because I had this thing selected, it's going to pre-fill bits within, and it's kind of what I want. But if I go up and down, makes it more specific. I said I wouldn't say specificity anymore, but here we go. So down means, we get more specific, up, gets less specific.

What I'd like to do-- because if I left it there and said I just want to style the 'li's inside 'ul's, that would apply across the whole website anytime there's an Unordered List. And I might have bullet points just a little more on my Body Copy, so what I want to say is, I want - using the down arrow on my keyboard, I just say I want the 'li's that appear inside 'ul's, that appear inside this Class called Desktop view. Do I need this a-tag here? I do not. Why? Because I'm just playing around with the 'li's, not worried about the a-tag. It's the Li that gives it the bullet point, click 'return'.

So this is my first Style, and I'd like to say, under 'Text', I'd like to go down, and try and find 'text-decoration'. I'd like to find 'list-style-type'. 'Undefined', I want to set it to 'none'. We see, the dots disappeared. We're just going to slowly work through something different, what's called Compound Selectors. So remember, Selectors, we've dealt with Classes before, it had the dots in front of them. And these ones are called Compound, because they are bits. There's a bit of Class there, and there's bits of these regular Tags here. So they're Compound, bits of everything compounded together. You don't need to remember the word compounded.

So what we're going to do now is, I'd like to-- at the moment these are stacked on top of each other. This is their default state for 'li's. And that stack on top of each other is called Block. So by default, these are in a display called Block, which means they're stack on top of each other. We want to change that. We would like to go up to the top here, to 'Layout' and we would like to find 'Display'. And instead of Block, we're going to pick 'inline-block', and that stacks them side by side, easy. Now, if we were styling these, all the same color, I can go into my background color, and change the background color. My problem is that I want them to be different. So let's check out my Illustrator file.

You can see, in Illustrator, I want them to be two different colors, so if I style the 'Li' it means that they're both going to become red, or green. And that's not what I want, I want them to be different colors. So let's jump back into Dreamweaver. Let's create two Classes, we'll create one called 'Red Button' and 'Green Button', and apply them to them. The reason we're doing that is that we can re-use that green button, or red button, because there are going to be other buttons on our side that we are going to use this for. So, down here, doesn't matter what you've got selected, but it's going to go to 'style.css', 'Global'. And in 'Selectors', I'm going to click '+'. Forget what's in there, we're going to create our own Class. And they're called 'btn' then hyphen '-', and we're going to call the first one 'red'. Why do we call btn red, and not red btn? It just means that they're going to be stacked next to each other in the css here. Button green, button red, we got a button blue, it's just easier to find them that way.

So I click on 'btn-red', and I'm going to go to 'Background', and I'm going to pick a color. Now, if you've done my Illustrator course, you would have known how to export the css. We're going to quickly look at this now. So, in Illustrator here, I'm going to click on this 'background' here, I'm going to go to 'Window', we are going to go to 'CSS Properties'. And it's going to tell me what the background color is. And that's the thing here I want. I'm going to double click it, or right click it, click 'Copy'. And if you did do the Illustrator course, you might have exported this as a text document, but because we're both the designer, and the front end web developer, we are going to just copy and paste straight from the Illustrator file.

So, I've copied it, jump back into Dreamweaver. And in here, I'm going to click on 'background-color'. And we're going to go back to our hexadecimal numbers. You can see, in Illustrator, there was actually both options. I just find these easier just because they are simpler, close to copy and paste. So, in 'background-color' here, we're going to go back to 'Hex'. And we got to make sure that we got the hash '#' in front of that. I didn’t copy that from Illustrator. Hit 'return', that's my little background color. Now I'm going to apply it. So what do we apply it to? Do we apply it to the a-tag? I don't think it matters, we'd probably run into problems later on, let's hope we don't. So we're going to go into here, and go 'btn'. And there it is there, red. Lovely. And it's got a background color of red. Not the padding we need, but we'll do that in a sec. So we'll do this guy next.

So, create a new 'Selector', everything selected correctly. I'll call this one '.btn-green'. Same thing, and I jump into Illustrator. Here in Illustrator, I'm going to click on this guy, grab that guy. Copy-- for some reason I can't do 'Command C' for copy, or 'Control C' on a PC, I don't know why. You might be able to. But in here, I'm going to go, this one. I'm going to go to my hexadecimal numbers. A little passion there, that's quite me. I'll apply it to this one. Here we go, '.btn'. That's the other reason I call it btn because they're all grouped there when we type in 'b'. Lovely.

So now we want to add some Padding to the top and bottom of these buttons. This is where it's a bit of trial and error. I promise you, I didn't know off by heart, I just kind of tried both options of styling both, this one here. We're like, "I can Style the Li and add some Padding to this." And I did it, and I went, "Hmm, that didn't work." So, we have to go for a different method, so let's go for the broken method. Always a great one to start with.

So, where these 'li's are inside my 'ul's, which is specifically inside my Desktop view, which is great, they're really specific. And I'm going to say I'd like some Padding, I'm going to drag it up. You can see, it's not really adding Padding, it's just pushing it from the top. So that's when I went, "Hmm, not that," see this trash can here, turn that off. So what I decided was, is I clicked on this guy, and I went, 'New Style' and I'm going to make it more specific. So I press my down arrow. So it needs to be the 'Desktop' view, 'li's. And what I need it to do is, this a-tag. That's down the bottom here, you can see there's an a-tag, inside a li, inside an ul. Now I'll leave this in here as well because I'd love to just tell you the answer, but trust me, these things, we think "Definitely, I'm 100% sure that's going to work." And then it doesn't, and you're like, "Hmm." You have to kind of look at the tags, and go, "What else could I try?"

So in our case, the active link. The hyperlink, which is inside the Li, which is inside the ul, which is inside the Desktop view. This one's going to work, well, I hope it's going to work. And I'm going to go to the top one, 'Layout' I'm going to add some Padding, let's just drag it up. There you go, so that one's working. And what is it? It is 13 at the top, and bottom. 13, and it is 43 at the left and right. 43, again. My keyboard seems to be typing in double 4s. 13 at the bottom, and 43 on the inside. You see, there's all my little buttons working.

Next thing I want to do is, I need to kind of like move that up a little bit. And you can use minuses. We're like, "Cool, so we just did the Padding on this one, we just used minus margins." And it doesn't work. Hit the trash can. So, it's a bit weird sometimes trying to work out, is it the a-tag inside the Li, which is inside the ul? And if you get frustrated, don't worry, it's general frustration all industry around. So, maybe I can do it to this one. The li ul. I go minus in here, and that doesn't work either. And so, I work out that I need to go up to the actual Desktop view. Let's go 'Selector', there's one I've already got, it's called 'desktop-view'. If I do it to this one, you can see, it starts working. I'm going to click and drag, because I'm not sure, about there. Cool, one eye closed for that one.

So -5 pixels, it goes up. So sometimes you're like, "Well, this one is, and this one is not." And you end up having quite a lot of Classes, and delete them just to figure out which one's controlling it. We're going to do a 'Save All'. Next thing I want to do is remove the underlines. The underlines are controlled by-- you can play around with all of these, but it's actually a-tag because that's specific for hyperlinks. So we're going to go to that one, go to Type. And we're going to go down here to 'text-decoration', and pick 'none'. By default, it's on underline. So that's gone. Choose the font color, probably end up with the same one, hopefully. And the font color comes from Illustrator. I'm going to click on this text here. And there is the font and the color. I'm going to right click it, click 'Copy', back into Dreamweaver. And we're going to go 'font-color'. Hash '#', leave that there. It's kind of like just an off-white.

The next thing I want to do to make these buttons work, is I want to play with the fonts. At the moment, they're Times New Roman. It's not going to work for me, so I want to take a look at using fonts. Something a bit different from Arial, and Times New Roman, and the built in fonts. So we're going to look at that in the separate tutorial, which is right after this one.