Build Your Own Business Website header image

How to Create an apple.com Style Menu in Thesis 2 – Part 2 – Adjust the Menu Item Widths

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’ve discussed the characteristics of an apple.com style menu and created the basic menu in Thesis 2, we’ll move on to styling the menu and specifically we’ll begin by adjusting the menu item widths.

Remove Full Width Menu Background Color

First we’re going to get rid of the background color that extends all the way across here. This background color sits inside of the Top Menu Area so we’ll come over here to the Top Menu Area and we’ll just get rid of the background color.

So now that is no longer there and then we’re going to start this process off really by creating a new package and this is new in Agility 1.0.6, the Agility Supplemental Menu Styles package.

Assign Widths to the Menu Items

We’re going to add that package and let’s see, Menu Demonstration and I’ll say menu_demonstration then under our Options, under menu item height and width, we have 6 menu items so what I want to do is spread that out evenly across the entire width of the site so what we’re going to do is divide 6 by a hundred, it’s 16.667% so for the menu item width, I’m just going to say that, 16.667%.

The menu item settings can make the background color transparent at the moment and this is only going to apply to the top level menu items although it doesn’t really matter since we don’t have any submenu items but we’re going to make it just the top level menu items and we’ll hit save and then we’re going to put that Menu Demonstration in our reference list. Not quite what I was expecting here, 1,2,3,4,5,6.

Actually, I think what we’ll do here is we’ll make that more specific so we’ll come back over to the Menu Demonstration and we’ll change the selector so that is # so it applies to a specific menu so #menu-simple-menu.menu so that is 16% but my li is not getting that same width and it should be. No, it’s still not actually behaving correctly yet so let’s see, why would that be the case? This menu item should be getting that same width.

I think maybe what’s happening is my little supplemental menu thing isn’t doing exactly what I want it to do so I’m going to add a little bit of Additional CSS to this so that we can force this to do what we want it to do. The Additional CSS will be li.menu-item and we’re just going to give it a width of 16.667%. Okay, that did work, that spread those out.

Actually, under this circumstance, the percentage thing should really now be 100%, that’s interesting, that’s a little wrinkle that I thought was resolved that is not. But we’ll get that fixed in an immediate iteration of this thing but for the time being, what we’ll do is we’ll say width auto so that it will fill up the whole space assigned. Let’s see, did that work now? Yeah, it did okay. So little wrinkle there that I will get worked out and I think I’m going to just take out finish and just put products in there because that’s also going to mess this up just a little bit.

0 Comments… add one
0 comments… add one

Leave a Comment