Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Center Page Menu Bar


  #1  
Old Jan 26, 2009, 01:42 AM
technstuff
 
6 posts · Jan 2009
How do you center the the Page Menu Bar so the text is not on the left but in the middle?
  #2  
Old Jan 26, 2009, 04:38 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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:

HTML Code:
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.

Last edited by Flynn; Feb 24, 2009 at 01:29 PM. Reason: Added "overflow:hiden" to div.rMenu-center{...}
  #3  
Old Jan 26, 2009, 08:48 AM
technstuff
 
6 posts · Jan 2009
I made the changes and still no center.

Thank You for all your help with this.
BTW I great theme!
  #4  
Old Jan 26, 2009, 09:17 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Are you running a 3.x version? I tried it in 3.1.8 and it worked.
  #5  
Old Jan 26, 2009, 10:19 AM
technstuff
 
6 posts · Jan 2009
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 {
border0;
}
div.rMenu-center {
borderdashed 1px #ccc;
background-colorwhite;

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
  #6  
Old Feb 6, 2009, 04:52 PM
cks
 
2 posts · Feb 2009
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!
  #7  
Old Feb 7, 2009, 12:20 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.
  #8  
Old Feb 10, 2009, 05:05 AM
nils
 
3 posts · Feb 2009
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 ...
  #9  
Old Feb 10, 2009, 08:22 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
To right align, change in bfa_header_config.php

HTML Code:
<ul id="rmenu" class="clearfix rMenu-hor rMenu">
to

HTML Code:
<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


  #10  
Old Feb 17, 2009, 10:05 AM
khou
 
7 posts · Feb 2009
Quote:
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
  #11  
Old Feb 23, 2009, 08:06 AM
kcmeesha
 
4 posts · Feb 2009
Quote:
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
  #12  
Old Feb 24, 2009, 08:48 AM
Tigger
 
35 posts · Feb 2009
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 ?
  #13  
Old Feb 24, 2009, 01:06 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #14  
Old Feb 24, 2009, 01:16 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
@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...
  #15  
Old Feb 24, 2009, 01:28 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Add overflow:hidden as an additional style to the centering container

HTML Code:
div.rMenu-center { 
border: dashed 1px #ccc; 
background-color: white; 
overflow: hidden;
}
I am adding this to the code above as well
  #16  
Old Feb 24, 2009, 06:28 PM
kcmeesha
 
4 posts · Feb 2009
Thanks so much, it worked, and I adjusted the ad, thanks for noticing.
  #17  
Old Feb 27, 2009, 07:37 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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

HTML Code:
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
  #18  
Old Feb 27, 2009, 03:37 PM
Tigger
 
35 posts · Feb 2009
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 !!!
  #19  
Old Feb 27, 2009, 04:17 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
HTML Code:
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.
HTML Code:
div#menu1 {
background: ....
}
  #20  
Old Feb 28, 2009, 03:43 AM
Tigger
 
35 posts · Feb 2009
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.

Last edited by Tigger; Feb 28, 2009 at 03:46 AM.
  #21  
Old Feb 28, 2009, 04:17 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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

HTML Code:
ul.rMenu {
background: transparent;
}

ul.rMenu li {
background-color: transparent;
}
  #22  
Old Feb 28, 2009, 04:58 AM
Tigger
 
35 posts · Feb 2009
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 !
  #23  
Old Feb 28, 2009, 10:01 PM
bike boy blue
 
5 posts · Feb 2009
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

Last edited by bike boy blue; Feb 28, 2009 at 10:16 PM.
  #24  
Old Mar 1, 2009, 06:49 AM
Tigger
 
35 posts · Feb 2009
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;
}
  #25  
Old Mar 1, 2009, 07:40 AM
bike boy blue
 
5 posts · Feb 2009
Great, thanks a ton tigger. That worked perfectly.

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Atahualpa Page Menu Bar -&gt; BFA Page Menu Bar? bhannemann Page & Category Menu Bars 16 Feb 21, 2011 04:49 AM
[SOLVED] Page Menu Bar - Strange Space Occurring Between Menu Items NealSchaffer Page & Category Menu Bars 2 Jun 20, 2009 10:18 AM
A hack to align page navigation menu to center araneum Page & Category Menu Bars 8 Apr 9, 2009 07:48 PM
How do I add an icon to a page menu link in page menu bar? bcorrigan Page & Category Menu Bars 9 Apr 6, 2009 02:35 PM
Center titles in menu bar. c32v Page & Category Menu Bars 2 Apr 5, 2009 07:13 AM


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


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