Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Want centred navigation to be full width (http://forum.bytesforall.com/showthread.php?t=2340)

Babs Jul 10, 2009 07:18 AM

Want centred navigation to be full width
Where should I set this? See http://www.ecohousesolar.co.uk/ for what it's doing now - only as wide as it needs to be - want it to be the same width as the header, etc.



neska0209 Jul 11, 2009 12:05 PM

I'm banging my head against a wall on this too. I hope someone can help.

shedhed Jul 11, 2009 02:44 PM

This isn't tested but (unless there's an easier way) you are going to have to add some CSS inserts in the theme options.

Firstly one to tell the page menu to be 100% width:-

div#menu1 ul.rmenu {width: 100%;}

Then one to tell the page menu items to be x% width:-

ul.rmenu-hor li {width: x%;}

where x is 100 divided by the number of items in your page menu. If you want different widths for each menu item due to the length of the titles then you will have to have individual CSS inserts for each of the menu items. The theme gives a unique class identifier to each menu item thereby allowing you to define a CSS rule for it. Using Firefox and Firebug makes sorting this out easier.

Note that if you added page menu items at a later date you would have to go back and tweak your CSS inserts.

Also note that different browsers will render this slightly differently. I did something similar for my category menu bar. I have five categories so set the width of each item to 20% - perfect in Firefox but not in IE. I had to use a CSS hack to set the width to 19.95% for IE6/7 and 20% for Firefox. It's not pixel perfect but close enough.

You can see my category menu bar set to full width and split into 5 at http://www.rhodieridgeback.com - use Firefox and Firebug to drill down and see what CSS rules are being applied.

Hope this helps.


jalanbk Jul 17, 2009 02:00 AM

I was playing with this and found a solution to this in this way --

Add CSS inserts --
div#menu1 {border: solid 1px #000000; background: #777;}

Use colour code as you wish This will solve your problem and menu will appear centered...

You can see mine at - http://www.pchijack.com/

All times are GMT -6. The time now is 05:22 AM.

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