Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 8 – Style the Nav Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

Now we’re on to styling the Nav Menu for this Thesis 2 upgrade. We’ve got our Nav Menu style here and we’re just going to customize it.

Customize Font Sizes and Color

The way we do that is under Menu. Let’s come over to our menu settings over here. Our font family was Georgia, the font size is 12 pixels, the link color is white, the link text hover is white, the current is black and the current parent is black then we have our link background color. If we come over to font settings, we’re Georgia, 12 and I believe it’s bold.

Our link settings, the text color is white and the background color is that, hover links is white, current links are black and current parent links are black. Then our hover background is that color, our current background is this color and current parent is this color. Now, you can see where the excel spreadsheet comes in pretty handy. Let’s see, menu item padding, I think that looks about right, we’re just going to leave it like that for a moment.

Customize Additional Settings

For border settings, we are going to have none. Let’s just save, see how we’re doing. It should actually be pretty close, okay so we’ve got that working. Now what we need is some space in between those tabs.

If we come over and take a look at our menu, we’ve got about 15 pixels of margin in between these things so that’s what we need to add now. We come over to our menu and this we’re going to type out so .menu a then we’ll say {margin-left:15px;}, save.

We should probably stretch this out a bit so we could add some padding on the sides of this. If we come over to menu, menu item padding, we got 9 and 9, half was 13 so let’s say it’s 18 pixels, right padding, left padding. That might be too much, we’ll see. No, it’s fine in fact, we might even be able to get just a little bit more out of that so let’s say 19 and 19.

Well, that looks pretty good, we could probably add a little bit more if we felt like we need to but we are getting quite a bit closer. In any case, our header is pretty well wrapped up here, let’s just look at that. It has this going all the way perfectly to the edge so obviously, there was more padding on the left and right than that.

Let’s take a look at the custom CSS that we had here so there’s our .search _form, #feature_box, content, menu. No, we have more padding but I think we can fine tune that later. If we wanted to make those two things so that they were the same widths as this, we could say for menu item 419 and for menu item 405, we could make them wider.

Let’s look at that, let’s see what happens if we do that, just for grins. We come back over to menu and .menu .menu-item-419 a {padding-left:25px;padding-right:25px;} let’s get it 100% right before we commit ourselves to this. Almost there right, we only need 2 more pixels, let’s just try the 2 pixels and see what happens, 26 and 26.

While we’re at it, we’ll add the other selector, 405 a. Okay so I’m going to get rid of 1 pixel on one side so it’s 25 instead of 26. That’s interesting so this one needs probably because the number 2, this number needs to be slightly narrower so 405 needs to be a bit smaller so we’ll just do them separately.

Now obviously, this level of fine tuning, you can only do after you’ve actually set up your menu entirely because it’s going to completely fall apart as soon as you change something in it. If you feel the need to do this, do it after you’ve got all that set up.

We’ll just save this and look at it outside of the canvass. There we go, that’s what we wanted it to look like so now we’re going to take questions.

0 Comments… add one
0 comments… add one

Leave a Comment