[SOLVED] Custom Top level menu size + span the menu accross the width of the page
First, I'd like to thank you for the wonderful theme! This theme is the most customizable theme that I've ever tried till date. And the support from developers is awesome! :)
Now, trying to customize my site, I'm running into small issues (rather my requirement). I'd like my menu to have a custom width. i.e., menu size not adjustable based on the links inside, but a menu that would span accross the width of my page. Something like the one below: http://www.mylifetrails.com/wp-conte...11/12/menu.png Searched around the forums and couldn't find anything that helpful. I'm trying to figure out which file that I would need to edit and which line, but with no joy. I'm not a programmer or a developer by nature/profession and that leaves me unarmed. Hope someone here can help me! :) |
add the following to CSS Insets - make sure to chang the width to what you want
HTML Code:
div#menu1 ul.rMenu li {width:100px;} |
You can also divide 100 by the number of tabs and start with that as a percentage. For instance if you had 5 tabs you would start with
HTML Code:
div#menu1 ul.rMenu li {width:20%;} Then I start reducing the width to 19%, 18%, etc until it doesn't wrap. Then I add up to three decimal places to the width starting with the width that didn't wrap. So If the menu stopped wrapping at 18% but didn't fill the full width I would try. 18.1%, 18.2%, etc. until it wrapped again and then back off. So what you might end up with after all this is HTML Code:
div#menu1 ul.rMenu li {width:18.456%;} HTML Code:
div#menu1 ul.rMenu li {width:18.456%;text-align:center;} |
Thanks both! :)
Is there any specific file that I should be looking at? (for I have about 3 different files that has the word CSS on them). And should I replace any line? |
In the theme options - no need to change any code (gotta love this) Add HTML/CSS Inserts
|
Wow... that did the magic! :) Thanks both!
I'm also trying to get the menu displayed below the header image. Let me look around a bit before I post another question! :) |
Oops!! That was a quick one! :(
The menu worked, but it looks like the sub-menus aren't displayed properly... http://mylifetrails.com The width of sub-menus are shortened... |
Try adding this to CSS Inserts. If you change the width in the menu area of the theme options you may need to change this width as well.
HTML Code:
.rMenu-ver li { |
But that seem to have inserted a new blank cell at the end of the menu bar and I don't find a way to remove it! :(
Quote:
|
Just to add to the above, the theme is a flexi width theme
|
This is where "fiddling" with CSS comes to play as there is no step by step as such. I just played a little and came up with this to replace the code you have.
HTML Code:
div#menu1 ul.rMenu li {text-align: center; width: 14.206%; border: 1px solid #61ECC9;} |
Neat! :)
Little more borders left around, and I'll try to "fiddle" I thought 100/7= ~13 and was trying to fiddle around that! :( |
All times are GMT -6. The time now is 04:57 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.