Wordpress Themes - WP Forum at BFA - evenly spaced page menu bars

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - evenly spaced page menu bars (http://forum.bytesforall.com/showthread.php?t=1809)

phryedrice

May 27, 2009 03:06 PM

evenly spaced page menu bars

hi, i was wondering if it is possible to space out the menus to spread across the page evenly. I dont have many page menus so i think it looks a little weird having them all bunched up on the left. so anyway to spread them out? thanks

estyron

May 30, 2009 10:12 AM

I am also wondering how to do this. thanks!

Flynn

May 31, 2009 06:25 PM

Not evenly in the sense that the distance changes automatically depending on the amount of menu tabs, but you can give each menu tab a fixed left or right margin at HTM/CSS Inserts -> CSS Inserts:

HTML Code:

ul.rMenu li {

margin-right: 50px;

}

/*reset for submenus*/

ul.rMenu li ul li {

margin-right: 0;

}

cdrice

May 31, 2009 06:27 PM

I'd be interested in a "supported" solution to this as well. In the mean-time, I've kludged this together and it works for me...

Under "Page Menu Bar" options, "Font Size & Face," I replaced the default:
11px Arial, Verdana, sans-serif
with:
6px Arial, Verdana, sans-serif; font-weight: bold; width: 9em; text-align: center

Which gives even-spacing (with the width attribute), and also centers each page title (with the text-align attribute) in each menu box.

ETA - Hi, Flynn! Looks like I was too slow on the draw and you already replied! ;)

joaodagraca

Aug 1, 2009 05:45 AM

Hi ,

I would also like this feature in my menu.

Thanks

kdawes01

Aug 1, 2009 11:26 AM

I had posted a similar question and Flynn, you solved in aces here! I didn't think of the reset of the sub-menu list! I would suggest a modification to Flynn's fix though. Using a fixed spacing wouldn't work for me so I added the following instead...

Code:

/* space menu items across width */

ul.rMenu li {

width:10%;

text-align:center;

}

/*reset for submenus*/

ul.rMenu li ul li {

width:10em;

margin-right: 0;

}

I have a liquid layout and with a fixed menu item margin in a 1024 width browser the menu would wrap... So I instead made the menu item a percentage (10% in my case i.e. 100/#menu items=percentage), aligned the text and in the reset, coded the sub-menu width back to 10em

Works great for me! Thank you Flynn!

Ken

cdrice

Aug 2, 2009 10:24 AM

This is getting closer and closer to what I wanted in the first place, myself... However, using any of these methods we have discussed so far, I still have an empty cell (albeit very, very small) on the far right of the menu bar. Is it possible to completely eliminate that final empty cell?

Flynn

Aug 8, 2009 05:01 AM

You can give the first item a specific style with CSS

li:first-child {
...
}

All times are GMT -6. The time now is 10:55 AM.