Build Your Own Business Website header image

How to Convert a Flash Site to WordPress & Thesis 2.1 – Part 8 – Customize the Menu Style

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 that we have the header styled properly for the Thesis 2.1 site, we’re going to move on to customizing the menu style.

Use Custom CSS to Style the Menu

And we want to center the menu just as we did with the header. Let’s say #menu main-menu, display: inline-block. Actually, I don’t think this is going to work; I don’t think text-align center is right. No, it’s not. It needs a container for it to have a text-align center so we’re going to give the nav menu a container.

Center the Menu

That’s going to be an HTML Container and Top Nav Container, we’ll give it top_nav as it’s id and drag that into the container down below the header, drag the nav menu into it. Save it and the same thing with our front page, Top Nav Container, drag it into container, drag it down and then drag Top Nav into it, okay.

So now that we have container, Top Nav, we’re going to give a text-align center. And then our ul, we’re going to give display:inline-block. And it is centered now.

Let’s come back over here then to #top_nav and then the next one is, #menu main-menu display:inline-block and then is that it? Actually, that was it and so that I don’t have multiples here, I’m just going to keep them all in one line. Oh, it’s called nop_nav not top_nav. There we go.

Change Colors, Borders and Padding

So then we’re going to change these colors and get rid of the border. First, let’s take a look. How does this look? It turns that grey color when we are hovering, okay. So now we’re going to do the menu and actually, I’m going to just make this the top nav menu just in case somebody decides they want to do something else so #top_nav .menu a and background-color:transparent, font-weight:bold, border:none. And then border-left:2px solid #fff; let’s see how that looks.

What I did was erase the borders and then put a border back in because the border configuration is kind of unusual because it’s not 2 pixels, I guess it’s 0 pixels.

Then we’ve got this bottom, is that the bottom of the menu? Yes. I’m just going to repeat that except this time it’s going to be .menu a and then we’re going to get rid of that and that so it’s going to say border:none and then this will say 1px and then padding and we’re going to have 0 pixels top and bottom and 20 pixels left and right. That worked.

Change Font Style

We’re also going to get rid of the letter spacing, normal and I guess we’re going to take this down to 10 pixels. Once we’ve got letter spacing down to normal, let’s take that back to 20 again, perfect. No, it’s definitely more compact than that, 15.

Then we want to get rid of this line here and we’re going to get rid of that by coming into Appearance and Menus and over to our Home. We’re going to add a custom class to this so we have to come up to Screen Options and then Add CSS Classes here. This CSS class is going to be first.

So then we come back over to our Custom CSS and we’re going to say #top_nav .menu a.first, border-left:none. That gets rid of the border on that one only by adding that class to it. Not yet, it didn’t. Oh, I see pardon me, my mistake, I got those mixed up. It’s not .menu a.first, it’s .menu .first a.

The class “first” is not conditioning the link tag, it’s conditioning its container. So there you go and yes, you could have used a first child kind of thing instead if you want. It’s a little less straightforward than this but it’s certainly possible to do that instead.

Next up we’ll be customizing the Front Template Page Title.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one