Add and Style the Menu – Case Study, Styling a Gardening Blog Part 4

by Rick Anderson on April 27, 2012

In part 4 of this series on Styling a Gardening Blog, we style the WP Nav menu using both Thesis Design Options and our Thesis WP Nav Menus Plugin.

Add a WordPress Nav Menu

Rick:  The next thing we’re going to do is put in the menu. So come back over here to our dashboard and go over to Thesis Site Options. And under select menu type, we are going to actually choose the WordPress Nav Menu, not the Thesis Nav Menu. The Thesis Nav Menu is being deprecated in the next version of Thesis so this is as good a time as any to make the change.

So now that we’ve chosen that, we’re going to create our menu. So go to Appearance and Menus and we’re going to create our new menu and this is going to be our top menu. And we’re going to make our top menu our primary menu. And because the top menu has been placed in this primary menu theme location, any styling we do to this menu in Thesis Design Options will automatically apply to this menu.

Now what we’re going to do is add some of our choices to that menu and you do that by looking down here at these categories and pages and selecting them. I guess we’re going to have to view all. I can’t really tell. Actually Jared, I’m going to turn your microphone here for a second.

Good morning, Jared.

Jared:  Good morning. Can you hear me?

Rick:  Yes. Which pages do you want on your menu?

Jared:  To be honest with you, I don’t know.

Rick:  Probably Contact and…

Jared:  What about the categories? Where will they fit in?

Rick:  Well, to date, you don’t have a category menu. Do you want to have a category menu?

Jared:  Probably… yes, we would want a category menu but what goes in the main menu? What goes in the category menu? Personally, I think she’s got too many categories but that’s what she has.

Category Menus

Rick:  Well, it’s certainly too many categories to go on a single menu because that all won’t fit on a menu. But having said that, you can always pick the big categories to put in that menu or use a categories widget which is what we did in the sample here. That’s what this is in the sample; we used a category widget to show all the categories. But we need 4 or 5 things to go in the menu up there.

Jared:  I like what you’ve done as far as beginning in advance but she has no information along those line.

Rick:  Yeah, that’s all based on the site we were actually doing it from. Well, I’m going to put the Contact Us page on there. We’re going to put the homepage on.

Jared:  That one is Breakthrough Growing Organic. I wonder if that’s the tomato ebook.

Rick:  This one’s the tomato ebook. Are you using the FAQ at all?

Jared:  I don’t know. It’s basically her project. I have no idea what she’s using.

Rick:  Okay well we’re just going to pick those pages then. So Home, Growing… and what we’re going to do with this one is I think we’re going to just make it Growing Organic Tomatoes. We’ll take out all the rest of that stuff.

Jared:  How about the expression, “Growing better than great tomatoes”? Does that interest you to look at it?

Rick:  Well, the expression is fine but what we’re talking about is what goes on the menu, what shows up on the menu.

Jared:  Okay.

Rick:  And obviously, the menu can’t have a long phrase. I mean, it can only really have just a couple of words.

Jared:  Okay.

Specify Menu Location

Rick: So, Growing Organic Tomatoes, Organic Gardening eBook and Contact Us. So we’ve saved that menu. We placed it in the primary menu position and now the next thing we need to do is go down to WP menus and actually specify the location. And we are going to take the top menu and put it after the header and hit save. Come back over here and refresh this. Perfect, okay.

Style the Menu Using Thesis Design Options

So now what we have to do is style this menu and we’re going to start off styling it actually in Thesis Design Options. In Thesis Design Options under our nav menu settings, we’re going to use Georgia for our font style. We’re going to use 14 point for the size.

For the typical link color, we want white. For the hover color, we want that yellow. For the current link color we want our light green. And for our current parent, we’re going to leave that as a light green. We can leave our link background colors alone although we are going to have 0 for our border. Yeah, we can leave those alone for the time being because we’re going to have to style those using the Nav Menu instead.

Style the Menu Using Thesis WP Menus Plugin

Let’s refresh that page. So the next thing we want to do then is move it into position and make those backgrounds transparent. So we’re going to do that in BYOB settings, Thesis WP menus. We’re going to go ahead and leave the same as Thesis Nav Menu and then we’ll use the nav menu text styles.

We’re going to have normal spacing. Let’s see, how does this look? It’s still all caps but normal spacing and bold, I believe. And then we’re going to remove all of the background colors and then… let’s see, top menu margin. I think that’s about… it looks almost like it’s about 50 pixels. And let’s just see what that looks like. Okay so I guess we want to come down another 20 and then we want to shift this over towards the center.

So if we come back over and add top margin to our menu so let’s make it 70. And then let’s give it some left margin, let’s give it 100 pixels of left margin. Okay another 10, I guess and then maybe only 60 pixels of margin. So this is obviously trial and error, just kind of shifting the stuff around.

That goes off to an entirely separate page so it doesn’t make any sense to put either of those pages on the menu since they’re not really their own page anyway. And okay, we can re-institute that contact form.

What I would recommend Jared, is that you take this Growing Organic Tomatoes ebook page and you actually turn it into a real sales page here rather than linking off to that other site. And I think the same thing with your Easy Organic Gardening ebook. I would definitely make this into a sales page. If you really need it to link off to another site, that’s fine. I suppose what we could do is completely direct them away from the site with these menu links but I don’t think that’s a very good idea myself.

Review the Menu

So, we’ve got our homepage here and we’ve got this pretty well-lined up. Let’s take a quick measurement. Let’s see, So you’ve got 100 pixels on that side and 118. So we could actually move that over 9 pixels and it would still be okay. So that’s what we’ll do. Margin, left margin, 69 pixels. Refresh.

Now obviously the whole left margin and centering the menu in the space with this plugin means that if you change your menu, you’re going to have to change those margins. So that’s got the top part of the menu done.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: