Add a Menu to the Footer – Case Study, Styling a Gardening Blog Part 7

by Rick Anderson on April 24, 2012

In part 7 of this series on Styling a Gardening Blog, we add a menu to the Footer.

Add a Categories Menu to the Footer

Rick:  You could choose to put another menu down here. It could be a category menu, right? You could put your biggest categories in there. So let’s go back over to Appearance and Menus and add a new menu. Call it category menu or let’s call it bottom menu for the moment. And then you could add the small ones like Organic flowers, organic herbs, health news…

Jared:  Let me comment here a little bit.

Rick:  Sure.

Jared:  She runs another site too with nutrients and that sort of thing and she makes a lot of the posts in here that apply there so they link back and forth to each other.

Rick:  And did that mean you don’t want them on the menu or you do want them on the menu?

Jared:  No, I do want them on the menu like you have the recipes and herbs and health news.

Create a New Style for the Categories Menu

Rick:  Okay. So we did just add a menu. Now we’ve got our bottom menu and we’re going to put it after the footer and we’ll make it again the same as the Thesis Nav Menu and hit save. Actually, it may not be the same as the Thesis Nav Menu. Yeah, it’s not going to be the same as the Thesis Nav Menu but it will be similar. So let’s a create a new style and let’s just call it… let’s say bottom menu.

And the menu text style will be Georgia, font size, normal spacing, menu colors. We’re going to make all the menu color background colors transparent but let’s see, the link color’s going to be white. Otherwise, let’s pick the same colors as in Thesis Design Options. So the hover is that yellow. The current is this green. Yeah, I think we’re just going to save that, refresh it and then we’ll end up with a nice bottom menu down there.

Apply New Style to the Menu

I thought I said not all caps. Oh, I haven’t applied the menu. I have to apply that style to this. So the bottom menu style is applied to the bottom menu. You create the style and then you apply it to the menu. And it looks like I’ve got a little bit of extra space here for some reason or another. Actually, I wonder what is going on with that. Let’s refresh this and …oh, that’s what’s happening. I hooked that to the wrong spot, I guess.

Well actually, let’s just look at this for a second. Footer… it’s almost as if something is pressing the page, making the page to be larger or did I specify a height? Oh, I did specify a height for content, that’s why. So if I make that 350 pixels… no, that’s not what it is. It’s a little bit of a back and forth in this kind of thing to get the appearance just right.

So if we look at menu item padding and margin, I don’t have any in there, do I? What happens if I say that? I don’t think it’s going to produce the desired result but okay, I’m going to have to play with that one a little bit later, I guess. For the time being, we have another menu down there.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: