[SOLVED] Struggling to get equal widths for sub-menu items - use of " !important;} "
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. http://www.bay2.thinkingspaceweb.com...35.22%20PM.png 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 :confused: |
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;} 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 Code:
ul.children li.page_item {width: 10em; } Now I noted this strange behaviour: http://bay2.thinkingspaceweb.com/bfa...ght_margin.png 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. http://bay2.thinkingspaceweb.com/bfa..._no_margin.png 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... :o - 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 Code:
ul.rMenu-ver li {width: 160px; } 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: http://bay2.thinkingspaceweb.com/bfa...for_widths.png I hope this work through helps others too. |
All times are GMT -6. The time now is 09:17 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.