Hi Flynn,

I centered the page menue bar. I pasted the code into the php file like described in Thread http://forum.bytesforall.com/showthread.php?t=122 . As your posted code text is a bit wider than the screen, you have to scroll to copy it all from the thread. And that creates a bug when you paste it into your php. When copying, it is missing a bit of the code which should be pasted into line 12 !!!

<div class="clearfix rMenu-center">

Just for everybody else to know, that you manually have to add this piece of code afterwards by hand typing.

I have now the page menu bar with few buttons hanging in the middle. Is it possible, to make these buttons expand to the whole screen width ? Like that, I would have a full navigatin bar and not just few buttons hanging in the center. Every button would get the same width, automatically (fluid) changing with the bowser width.

One more comment: When you delete the home button from the page menue bar by leaving the field blank in the theme options, wp is still displaying this generated button field for "home". As this button field is empty, it just gets a width of 0 and is not visible. But in fact, the dashed line of the field is visible. The result is, that you have 2 dashed lines at the very left side of your page navigation menue (sort of a double line). How can I delete one of them ?

By watching few users pages I could see, that this problem appears on many user´s pages. It is just not easy to notice, as it is just a small 1px line at the left side of the navigation bar.

You're right about the two borders on the left, but they're not caused by an empty <li>...</li> for a "Home" tab that was turned off, but by the left border of the menu bar plus the left border of the first menu tab on the left. The menu bar's left border can be turned off with

ul.rMenu {
border-left: none;
}

Thank you for noticing that, I'll add it to 3.2.1

Or are you seeing an empty <li>..</li> in the source code in your browser?

================

Re: Centering Page Menu Bar http://forum.bytesforall.com/showthread.php?t=122

At first I could not replicate your copy / paste problem. I could easily copy every line including the long one, be it by highlighting it with the mouse or by clicking into the code area and pressing Ctrl+A. That was with Firefox. Then I tried IE7 and bummer... you're right. I broke that into two lines now and added a notice to that thread plus a sticky thread about the general IE7/single scrollbar code line copy problem. Thank you for noticing that as well.

================

Re: Menu tabs whole width: That would be a bit troublesome I think, to bring that in line with all browsers. At least with the "expanding to whole width" part. You should however be able to give them more width (all the same) with a CSS Insert such as

ul.rMenu-hor li {
width: 15em;
}

To center the text inside add

text-align: center;

Hi Flynn,
I pasted the code into CSS Field to remove left border of page menu bar. But nothing happened. Above I had the code for centering the page menu bar already inserted. So I mixed them together. The result is working:

ul#rmenu2 {
border: 0;
}
div.rMenu-center {
border: dashed 1px #ccc;
border-left: none;
}

I would love to get such a fluid width page menu working for my new site, I am using Atahualpa 3.4.4 with it. Any ideas if it is possible, I have my page menu already centered, but it looks a bit "untidy" as it doesn't stretch for the whole layout. Thanks for your help, SY

A bump for this topic - have there been any updates allowing for a fluid width page menu? I'd love to have my links stretched evenly across the entire page rather than compactly centered in the middle. Here's the url: http://www.drjeremysharp.com. Thoughts?

A far as I am aware, there hasn't been any change to this area.

I was able to get my page menu to fill the container with the following CSS insert:

/* ================================================== */
/* How to increase width of menu items   */
/* ================================================== */

div#menu1 ul.rMenu li a:link, 
div#menu1 ul.rMenu li a:hover, 
div#menu1 ul.rMenu li a:visited, 
div#menu1 ul.rMenu li a:active {
padding: 2px 66px; /* _px top/bottom, _px left/right padding */
}

This is helpful, but the problem is that if the window is resized to be smaller than the container (as a user can do, and as the iPhone Safari browser forces), the menu items that don't fit get forced onto a second (or third) line. See http://www.damianmoskovitz.com and resize the window to see what I'm talking about.

Is there a way (perhaps with a CSS insert) to make the width or padding of each menu item decrease automatically when the window is resized to be smaller than the container (as the center column does by default) so that they all fit in the window on one line?

Thanks in advance for your help!