How do you center the the Page Menu Bar so the text is not on the left but in the middle?

EDIT: See post#17 (css-only, not exactly centered) and post#19 (table, exactly centered) for alternative/better solutions

Change functions/bfa_header_config.php, line 12

PHP Code:

$page_menu_bar = '<div id="menu1"><ul id="rmenu2" class="clearfix rMenu-hor rMenu">' . "\n"; 


to

PHP Code:

$page_menu_bar = '<div id="menu1"><div class="clearfix rMenu-center">
<ul id="rmenu2" class="clearfix rMenu-hor rMenu">' . "\n"; 


and, line 23

PHP Code:

$page_menu_bar .= '</ul></div>' . "\n"; 


to

PHP Code:

$page_menu_bar .= '</ul></div></div>' . "\n"; 


and at Atahualpa Theme Options -> HTML/CSS Inserts -> CSS Inserts, add, for instance, this:

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

The overflow:hidden in the CSS style above solves the problem of the horizontal scrollbar that appears too early but it hides the vertical drop downs in non-IE browsers.

I made the changes and still no center.

Thank You for all your help with this.
BTW I great theme!

Are you running a 3.x version? I tried it in 3.1.8 and it worked.

Hmmmm
3.1.8 downloaded yesterday. I went to paste the code for you here but when I did I noticed extra *'s so
I manually typed the code above and it worked. I guess copy and pasted added some crap maybe.

I added background color to span the site (just incase anyone else tries the code and wants to span the site.

PHP Code:

ul#rmenu2 {
border: 0;
}
div.rMenu-center {
border: dashed 1px #ccc;
background-color: white;
} 


Thank You again for all your help. Best worpdress theme I have ever used and help from the developer.

I bought viva7 for a client. Developer never responds to email, theme is hard to work with and now has quite and never released a wordpress 2.7 of the theme

I tried it too an nothing happened. I checked the code and it looks the same. I also have some CSS in the CSS box for making the header navigation bold. Would that affect it?

Thanks!

If you're using IE7 see http://forum.bytesforall.com/showthread.php?t=262

You might be missing a part of the code when copying single lines of code with a scollbar.

I've broken down that single-line-scollbar code from above into 2 lines now though so try again.

Hm, this worked for me, it centered it, but I'm looking for a right align, and changing it to rMenu-right didn't work... any ideas? This would be a great option to include in a future release... left/center/right seems to show up in several forum posts, but I haven't found the answer yet ...

To right align, change in bfa_header_config.php

<ul id="rmenu" class="clearfix rMenu-hor rMenu">

to

<ul id="rmenu" class="clearfix rMenu-hRight rMenu">

Submenus might be a bit off though as the CSS for right aligned is not fully implemented yet.

I'll add center/right in a later version

Originally Posted by Flynn

Are you running a 3.x version? I tried it in 3.1.8 and it worked.

It's also works in 3.2 !

Thanks Flynn

Originally Posted by Flynn

Change functions/bfa_header_config.php, line 12

after replacing line 12 I now have some white space on the right of the page and scroll bar on the bottom, the size of extra space seems to depend on the menu text size with anything over 24px causing the page to be wider than the screen. Menu is not nearly as wide as the page so I am not sure why this is happening. I adjusted the text size to 22px but I wonder why this is happening.
Thanks
www.kcmeesha.com

Same to me. Looks like the menu bar went through the right border of the whole screen. For the menu bar I added a picture as background and now it is even getting a bit worse.

Seems like the menu has three containers with a bit different settings. One of them is getting pushed to the right by centering the menu bar.

Also the scroll bar on the bottom is a bit nasty.

Anybody has an idea how to fix that ?

You both have the same issue but it doesn't seem to be caused by the menu bar.

@kcmeesha: Your Google iframe ad is 200px wide, the sidebar is 200px including 10px padding on each side. If you change all the 3 or so "200px" and "200" values in the Google ad the scrollbar goes away. The ad's container is too wide for the given sidebar width. Or change your right sidebar to 220px.

@tigger: Your scollbar issue seems to be gone now that you gave the layout a smaller width. If you want me to find the problem, please change it to the width it had before (99% or 100% ?) again for the next few days

@Tigger
@kcmeesha

The scrollbars come back when the window is being resized.

The scrollbars seem to start when the window width is smaller than 2 x [menu bar width]

Looking into it...

Add overflow:hidden as an additional style to the centering container

div.rMenu-center { 
border: dashed 1px #ccc; 
background-color: white; 
overflow: hidden;
}

I am adding this to the code above as well

Thanks so much, it worked, and I adjusted the ad, thanks for noticing.

Turns out that putting overflow:hidden on the div.rMenu-center hides the sub menus in non-IE browsers. So this only works with only one level which doesn't make it a drop down menu anymore.

Undo the changes of post #2, in other words: don't edit bfa_header_config.php at all,

and add this CSS-only solution through HTML/CSS Inserts -> CSS Insert

ul#rmenu2 {
margin: 0 auto;
border: 0;
width: 500px;
}

/* Safari Hack: it renders the menu wider and needs 
a few pixels more or it will wrap the last menu item. */
@media screen and (-webkit-min-device-pixel-ratio:0){
ul#rmenu2 {width: 550px;}
}

div#menu1 {
border: dashed 1px #ccc;
}

This requires that you specify a total width for the ul#rmenu2 (i.e. 500px) containing the menu items = combined width of all top level menu items. This does not need to be pixel perfect, but the menu will not be exactly centered, it'll be a bit (10-20px) too far on the left. This is not very noticeable though. Safari needs a few pixels more (i.e. 550px) as it renders the menu items wider than the other browsers.

Tested in IE 6/7, FF 2/3, Opera, Chrome and Safari 3.1 on XP

Hi Flynn,

I now put the following into Theme CSS:

/* Center Page Menu Bar */
ul#rmenu2 {
margin: 0 auto;
border: 0;
width: 590px;
}
/* Safari Hack */
@media screen and (-webkit-min-device-pixel-ratio:0){
ul#rmenu2 {width: 600px;}
}
/* Page Menu Bar Hintergrund */
ul.rMenu, ul.rMenu li {
background-image:
url(http://www.meinedomain.com/wp-conten...ounds/11.jpg);
background-repeat: repeat-x;
}

I have now 4 Problems:

1. I have to play around to find exactly the correct width of the buttons and add it (590px). If I choose smaller, it breaks the menu bar into two rows. If I choose wider, the menu does not get centered correctly (too much to the left side)

2. The background is only visible behind the non activated buttons. But not in the full width of the bar any more.

3. As before, it seems like the page menu bar consists out of 2 table boxes. One box is spanning the whole width. The second box is within the first one and contains the buttons (centered). These 2 boxes do not cover each other exactly. The one with buttons is a few pixles more to the bottom and overlaying the first box. So the background does not look equal all over the whole bar.
4. How do I get the activated button transparent ?

You have my address. Please have a look. Thank you !!!

You still have the menu wrapped into the div.rMenu-center container. Remove

<div class="rMenu-center"> and the </div> that closes it, in bfa_header_config

Add your background image to

div#menu1 {
border: dashed 1px #ccc;
}

div#menu1 is now the "bar" spanning the whole layout width.

You're right, it's not exactly centered anymore, it would be 10-20 pixels too far on the left side. The only solution I see to get it totally centered would be to drop this solution and to wrap the menu into a table. You'd add a table where you had (and you still have) the <div class="rMenu-center"> ... </div>

The following works well on all browsers
No scrollbar, and totally centered:

Tested in IE 6/7, FF 2/3, Opera, Safari, Chrome

Instead of <div class="rMenu-center">...</div> you'd wrap the menu into a table, plus apply new CSS rules-

With the table technique the changes of post #2 to bfa_header_config.php would look like this instead:

PHP Code:

$page_menu_bar = '<div id="menu1"><table cellpadding="0" cellspacing="0" style="margin: 0 auto"><tr><td align="center">
<ul id="rmenu2" class="clearfix rMenu-hor rMenu">' . "\n"; 


Note how, instead of <div class="rMenu-center"> a table is being inserted now with <table cellpadding="0" cellspacing="0" style="margin: 0 auto"><tr><td align="center">. The second change:

PHP Code:

$page_menu_bar .= '</ul></td></tr></table></div>' . "\n"; 


Note how, instead of closing the rMenu-center container (which is gone now) with </div>, the table is being closed now with </td></tr></table>.

And this is the new CSS Insert

ul#rmenu2 {
border: 0;
}

ul#rmenu2 li a {
white-space: nowrap; /* IE may wrap the link text of a first level item */
}

ul#rmenu2 li ul li a {
white-space: normal; /* reset nowrap for sub levels. They should wrap if required */
}

ul.rMenu-ver {
text-align: left; /* because the parent container, the table's TD has align="center" */
}

div#menu1 {
border: dashed 1px #ccc;
}

You'd put your background image for the "bar" effect on div#menu1. That's the container spanning the whole layout width.

div#menu1 {
background: ....
}

Hey Flynn,

I have good news and bad news

First the good ones: It works ! The navi is centered and the background is also there. Also no stupid scrollbar on the bottom !

The bad news: The background is not visible through the navi buttons. So the center is empty. How do I get the navi transparent or put also background into the buttons ?

If I would put background somehow into the buttons I expect it again not to match the background of the rest. When I make the browser smaller I see, that the buttons are still bigger than the the background container. They are overlaying the sidebar with approx. 1 or 2 pixels.

You have a white background on ul.rMenu and ul.rMenu li. See if you have any white color at Atahualpa Theme Options -> Page Menu Bar

if you cannot find any, add CSS Insert

ul.rMenu {
background: transparent;
}

ul.rMenu li {
background-color: transparent;
}

We are getting closer !
Now I have background all over the navi bar !
And if I would like activated button also to be transparent ? Just the font color should change color in hover status and active status. Button background always transparent.

Then all issues with page menu bar are solved !

Hey Flynn

Sorry for what is sure to be a silly question but in post #19 (which works smashingly by the way) i am a little confused about the last piece of code to be added in order to deal with the background image:

where does this go?

div#menu1 {
background: ....
}


thanks a bunch and sorry again if this is a silly question but i am brand spanking new to this.

Thanks a bunch

Put it into Atahualpa Theme Options >> HTML/CSS Inserts >> CSS Inserts

I added it as following:

div#menu1 {
background-image:
url(http://www.meinedomain.com/wp-conten...ounds/11.jpg);
background-repeat: repeat-x;
}

Great, thanks a ton tigger. That worked perfectly.