Build Your Own Business Website header image

One Hour Website Makeover DJ Sean Denard Part 9 – Add and Style Main Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - , ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is Part 9 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to add and style the main menu using the BYOB Thesis WP Menus plugin.

Video Transcript

So the very first thing we’re going to do next is to configure our menu. We’re going to place a menu right here in this area. And so the first thing we need to do is to create that menu and I’m going to start actually, in Site Options and I’m just going to use WordPress menus for this. So under select menu type, I’m going to make sure that WordPress nav menu is selected. And then I’m going to come down to widgets and… or Appearance and Menus and select menus. And right now, you can see I’ve got a category menu and a main menu. My main menu, let’s see, I’m going to just completely change this though. So I’m going to remove these things and I’m going to add… let’s see, under pages, view all. Demo 1, demo 2, I’m going to add those to the menu and I think I’ll do that like this.

Okay so there’s my main menu. I might need to come back and muck with that yet a little bit. And then the other menu I’m going to create… oh actually, we’ll just go ahead and let the category be the menu but we’re not going to have a submenu. So we’ll have just these categories here. This will be the category menu. We’re going to save that.

So now we have 2 menus to use. The main menu we’re going to use in header and the category menu, we’re going to use in the footer. So now that we have those, now we come over to our BYOB Thesis WP Menus plugin. Now, in our WordPress Menu Options list here, we have the Thesis Nav Menu as an option, the main menu, which is the name of the menu in the Appearance and Menus system, we have the main menu and we have the category menu. And it’s in this first box where we set are going to behave. Now, we’re not using the Thesis Nave menu so that doesn’t matter. But on our main menu, we’re going to specify a location.

What we’re going to do in this one is, we’re going to specify after the header. And then in terms of menu visibility, we are going to select that everyone can see this menu. This is primarily useful for membership-type websites. If you’re not running a membership-type website then you’re always going to want everyone to see the menu. And in terms of the menu style, for the time being, we’ll leave same as Thesis Nav menu. We’ll go ahead and hit save. And then if we come back over and refresh this, we should have our menu sitting down here now. Okay, we do.

Now obviously, this isn’t what we want it to look like and we have a couple of choices here. One of them is to add styling to the Thesis Nav menu that will make it look the way we want it to look. And another one is to just create a completely separate style and apply that separate style to this navigation menu. I think actually, that’s what I’m going to do first. Over here, the 2nd part is how many menu styles and you can pick the number of menu styles you want. For the time being, I’m just going to pick one menu style which is what is selected as a default. You can actually pick up to 8 different menu styles that you can configure and then the first thing you need to do is give the menu a style name. So what we’re going to do is we’re going to call this one… you know, I think… to make sure that we don’t have sort of clashes here in naming, I think I’m just going to call this one green. Actually, I’m going to call… yeah, green. So that’s going to be the name of the menu style and once we’ve named that, you’ll see we have… now it doesn’t ask me for a name. Now it says green styles.

And over here under the main menu now, I can select either same as Thesis nav menu for the menu style or I can select green which is what I’m going to select. So now, this main menu is going to have the style green applied to it. Now if we come over here and refresh it, it shouldn’t actually be much different because… oh, it’s different. Look at that.

Okay so now we want to set a text style and I am going to go ahead and just stick with Arial and I’m going to stick with the font style that’s the same as the Thesis nav menu. However, I want to get rid of the extra spacing so I’m going to go down to normal spacing. I do want it to be all caps but I’m not going to do bold, italics or center the menu text. In terms of menu colors, I need to choose a link text color, a link hover color, a current text color and a current parent color. Now, obviously, I don’t want any background color for this menu right? So I’ve got this dark green color here for my link color, white is the current color and yellow is the hover color. So what I’m going to do here is I’m going to open this up in Firefox actually and I’m going to pick my dark green color there and that is going to be my link color. Okay so the link text color is going to be that and actually, I think my… I’m going to leave those 2 things as white so all I need is a yellow color here. We’ll come back over to the yellow and we’ll see if we can get this yellow color. Okay so there’s the hover color is going to be yellow and the current and the current parent will be white.

Now what I’m going to do is I’m going to make all the menu background colors transparent so there won’t be any menu background colors at all. And in terms of border, I don’t want any border so I’m going to say 0. We don’t have any submenu items. I think I’m just going to say save for the time being here. Come back over here and refresh this and we should have a menu that’s pretty close to the way we want it to look. Okay so I guess we do want to use bold and we are going to want to spread this stuff out. And I think actually, we even want to make the font size a little larger.

So if we come back over to here, come back over to our styles, so we got our style name, our menu text style. Instead of font size, I think I’m going to go up to 16 pixels there. I’m going to select bold. We’ll hit save, refresh it. Okay, that’s a little bit better. Now, I need to spread this out a bit and so now is when we… in order to spread it out, what I’m going to do is specify a menu item padding and actually, just padding. What that’s going to do is that will add padding to either side of each of these menu items. Well actually, it’s either side of these menu items which will just stretch it out further.

So in terms of a typical left and right padding, I think I’m going to try 20 pixels at first and see how that works. Wrong one. Okay, 20 pixels isn’t quite enough. Let’s try… although, 1, 2, 3, 4, 5, 6, 7… that is… yeah, actually maybe a whole 10 pixels will… let’s make it 8 pixels. Let’s see what happens if we add another 8 pixels to our padding. So let’s make it 28. I don’t think 30 would work. 30 would give us another 140 pixels of width there since we have 1 pixel per… yeah okay, that’s not bad.

And actually, if I wanted just to push this over just a little bit so that the edge of cherries and the edge of home are sort of centered on the edge of this, I could just come over to my menu item and padding and then I could first fine tune the first menu item left padding. And so let’s just say that’s 35 pixels. What that’s done is that’s added you know, a little 7 pixels to this side right here. So if we refresh that which is then reduced the padding over here by 7 pixels. It looks pretty close. I’m liking the way that looks. Let’s just do one more thing. Let’s just test it once in Firefox. Let’s measure that.

Okay so if we measure this from the edge to the edge is… looks like about 38 pixels. And from this edge to this edge… oh you know what? It’s 53 pixels. So what we want to do… 58 and… no, 53 and 37 for example, that would be 90. So we want 45 pixels each side so that really means moving say 8 pixels… an additional 9 pixels. Well, let’s try that. Let’s see what happens if I add an additional 8 pixels to the left of that. One more time… okay 28, 35… let’s make it… well, 45. Let’s make that 45 pixels on the left and then refresh it. Yeah, there we go, okay.

So that got us our menu across here and you know, if 16 pixels is too big for the menu, we could take it down to 15, I guess. Menu text style, we’ve got 16. Now, I don’t have a 15 so it could take it down to 14. You know, I think this is a nice size. It stands out well so we’re just going to leave it at that.

0 Comments… add one
0 comments… add one

Leave a Comment