Menu Item – Fixed Width

Hey Mandy,

I’m having difficulty getting the menu items to display evenly. I suggest that rather than have so many items in your menu, you should instead add some to the menu as children of other menu items.

For example, you could go to Appearance> Menus and place all of the cat lineages under one menu dropdown and add them under that parent.

That will clean up your menu a lot.

Does that work for you?

-Kevin

Hi Kevin, thanks for your reply.

Each of those cat lineages will have their own set of subpages and probably two levels – I have started with the Panthera one. So I prefer not to combine them as the hierarchy will start getting too deep.

Can I set the width of each item to a fixed width? For example the submenu items under Wild Cat Lists all seem to be the same width, regardless of the length of text. Or does that only work for a vertical menu?

I have been trying things like: ul#menu-main-menu li:a { width: 60px;} but there is probably more I need to add, as that statement seems to have no effect.

Regards
Mandy

Try adding this CSS to Theme Options> Advanced Settings and let me know if it works for you:

.kad-primary-nav ul.sf-menu > li {
    width: 25%;
}

-Kevin

Great thanks Kevin, that’s a lot better.
I have shortened some of the menu labels so they don’t wrap over two lines.

Is it possible to left align the text of the labels?
I tried adding float: left and text-align: left but that didn’t work.

Regarding 3. Leave the background color active for the selected menu item:
I noticed this works on submenu items, just not on the top level item.
Eg if I go to Panthera Lineage > Panthera Genus – Panthera Genus in the menu stays with the orange background. But if I go to just Panthera Lineage – the background reverts to white.

Many thanks.

Regards
Mandy

Go into the page edit screen for the pages that have the white menu background, and find the “Page Title and Subtitle” area.

then find “Page Title background behind Header,” and set that to “Place behind header.”

Does this work for you?

-Kevin

Hi Kevin, no that didnt work.

I am talking about the individual menu item background, not the page background.

Is there any way I can attach screen dumps to illustrate what I mean?

Ta, Mandy

Ah sorry, I guess I misunderstood.

Here is some CSS to achieve that:

#nav-main .current_page_item {
    background: #DD9933;
}

Let me know if that works for you!

-Kevin

Excellent that works, thanks so much Kevin.

Regards, Mandy

Glad it works! Feel free to post on the forums with any future questions you may have.

-Kevin