Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2 – Part 10 – How to Make the Menu Span the Page in Agility

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 you know about the menus in the Agility Skin for Thesis 2 and the styling options available, the next thing we’re going to do is play around with the supplemental menu styles I mentioned.

We’re going to use the supplemental styles here on a different site because we already have the menu in the other site setup the way we want it. So we’ll come back over to our dashboard here and skin design.

Options for Making Menu Span Across the Page

Something people ask me often is how do I make this menu go all the way across the page. There are a couple of ways to do that. One of them is you can just add left and right padding to these menu items until the whole thing is wide enough to fit and another way is to set an absolute width for each of these menu items so that it goes all the way across.

Specify a Menu Item Width

In this case, we are going to specify a menu item width. Let’s come down here to our menus and go to the main menu link supplemental styles. What we’re going to do is specify a menu item width. We’ve got 6 menu items. So if I have say 1032 pixels, I’ll divide that by 6 which is 172. So, I could just set an absolute width of 172 pixels.

Because width is additive of padding and margin, that is if we specify this width, padding and margin are added to it. So we could either remove 40 pixels of padding from the menu item width taking it down to 132 which might be the easy way to do it or we can set it at 172.

Let’s just set it at 132 for the time being because that is 172 minus 20 pixels of padding on each side. Say okay to that and save our design options.

There’s a little bit of trial and error in this. Okay, not quite. I must have gotten that wrong. 172 let’s try that. Yes that did work actually. Setting it to 172 makes them span all the way across. Now, the downside of doing that is that Finished Projects doesn’t fit in when it’s 172 pixels wide so it steps up to be 2 elements tall.

Specify the Menu Width Percentage

Another way is to do something very similar to that but instead you specify its percent. And this is actually more reliable. So if you have 100 divided by 6, we’ve got 16.66%. We could in fact, come down to here and instead of 172 pixels we could put 16.66%. You can see it essentially looks the same as it did before.

Set the Alignment To Center

Now, if you want these menu items to go in the center, you can come back over to your main menu and you can set the text align to center and now the menu item is centered into the space.

It could be that you want to do it this way but you’re just going to reduce the font size a little bit so that the whole thing fits. So you could just come back over to the main menu and set the font size at say 15 pixels. Yes, let’s see it at 15 and there you go. Now it’s 15 pixels and it’s centered in that spot.

Set Left and Right Padding

Then the other way of doing this is instead of those options is to come over to our main menu and setting the padding. Right now our left and right padding are 20 pixels. We’ll start by adding 35 pixels. Say okay to that and then let’s get rid of the menu item width.

Okay, 35 isn’t quite enough padding so let’s try 45. Obviously these don’t have to be the same either. No, try 50. It’s getting closer isn’t it?

So we’ve got this little system of trial and error of trying to make it so the menu item spans all the way across. Note in this case, that it also adds that padding to these elements here and so that’s one of the downsides of using padding for doing this.

Now you can use the submenu to change the padding so that the padding goes back to normal for this instead of being that wide but this is another way in which you can set that. In fact, let’s just go ahead and do that.

Main menu submenu and we’re going to come down here to menu item padding and we’re going to say 10 pixels of left padding and 10 pixels of right padding. Say okay to that and then let’s make this again 250 pixels wide. Say okay and save it. There we go.

And we can probably just get rid of that text align center also. You don’t need text align center in the case of having the equal padding on the other side because it’s automatically centered at that point.

So there you go, you’ve got a system that works for making the menu span essentially the whole distance. You can either add additional padding to either side of the menu items or set an absolute width for all the menu items or set a percentage width for all the menu items. You can do any of those things using the supplemental style.

Next I’m going to show you how to create menu borders and menu buttons using the supplemental styles in Agility.

0 Comments… add one
0 comments… add one

Leave a Comment