Hello,

This is all about sub - menus - Specifically styling/forcing their width of them

I have had a read around this but can't quite get started.

Issue:

The basic requirement is I want the sub menu (background)s on this site

to be equal width - like they are on this site (which uses superfish)

/Issue

I'm using 3.4.9 with wp 3.01

I understand (from reading this forum) that

1. the main menu cannot be given a fixed width as it takes the width of its content

2. the sub menu can be given a fixed width (via ATO < Page Menu < ...

3. One can also force this by mucking around directly with the CSS and adding in via ATO < CSS Insert

4. using !important; in the CSS gives a good chance of forcing your new style

5. it really is a bad idea to try and edit the theme php files directly.


So, for the benefit of me and others... firstly have I got 1 to 5 right ?

If so, what can be styled and where should it be styled ?

I have seen JDs stickie,

but also this directly from FF Wed Developer element inspector on my site.




I'm reluctant to just dive in as this project is nearing completion - and although backed up I'm getting to that 'twitchy' stage - { Client is now very obsessed with having equal width sub menus - which is (obviously) the only thing I am struggling with }

I am happy to follow this through though and report back here if anyone can set me off with a useful tip or two.

Thanks in advance

Steve

Well you can give a fixed width to the main menu but because you longest title requires 159px the menu would wrap in your case. The code you would put in ATO>Add HTML/CSS Inserts>CSS Inserts is

ul#rmenu2 li {width:159px;}

Points 2-4 are pretty accurate. As for the sub-menu width... They look all the same width to me in Firefox and IE8. The varying widths usually occur if the sub-menu bug fixes have not been applied. You can see what those are in the New Versions and Updating forum.

Most anything can be styled and for the menus that is done with CSS in ATO>Add HTML/CSS Inserts>CSS Inserts

Thanks Larry,

I added

 ul.children li.page_item {width: 10em; }

using CSS inserts which fixed my sub menu widths.

Now I noted this strange behaviour:



There is a white margin (?) on the right side of the sub menu and obscuring the content below it

It may or may not be coincidence that the sub menu + margin(?) = width of main menu item...


Whereas this sub-menu displays properly.




I had a look using firebug, but couldn't see any obvious CSS issue (obvious to me anyway).


So, what is causing this, I wonder ?

Regards

S

Do you have the sub-menu bug fixes in place as reference in the New Versions and updating forum?

ahh... - give me a couple of minutes...

OK.

The bug fix works, thanks. link to post

But it took me a while to notice that after implementing the fix, the class for the sub menu <ul> now has a different name: rMenu-ver

ul.rMenu-ver li {width: 160px; }

I also found that

1. I can use px instead of em to get perfect alignment with my largest main menu

2. Pasting CSS in ATO>Insert CSS takes priority over the general ATO>Page Menu settings so '!important' is not necessary

Here is the fixed version:

I hope this work through helps others too.