Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Struggling to get equal widths for sub-menu items - use of " !important;} "


  #1  
Old Nov 1, 2010, 10:08 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
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
  #2  
Old Nov 1, 2010, 11:56 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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
HTML Code:
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Nov 2, 2010, 12:56 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
Thanks Larry,

I added
Code:
 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
  #4  
Old Nov 2, 2010, 01:02 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Do you have the sub-menu bug fixes in place as reference in the New Versions and updating forum?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Nov 2, 2010, 01:06 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
ahh... - give me a couple of minutes...
  #6  
Old Nov 2, 2010, 02:37 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
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

Code:
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.

Bookmarks

Tags
sub-menus, width

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
When "parent" clicked, "children" become active and don't change on hovering ymf Page & Category Menu Bars 1 Apr 23, 2010 07:43 AM
"comments are closed" issue, with repeating info-items on home page Gravity Comments, trackbacks & pings 0 Mar 23, 2010 10:20 PM
Background color "sub-pages" and "whole menu bar" gxxfy Page & Category Menu Bars 1 Nov 24, 2009 02:46 AM
How to use <?php... ?> code in "Post Info Items" sections? TotalBalance Post-Kicker, -Byline & -Footer 0 Mar 14, 2009 03:01 PM
"Widget List Items" Settings Are Not Persisted bseppa Sidebars & Widgets 1 Dec 13, 2008 12:34 PM


All times are GMT -6. The time now is 01:17 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.