Center Page Menu Bar
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:
PHP Code:
PHP Code:
PHP Code:
HTML Code:
ul#rmenu2 { |
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:
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
HTML Code:
<ul id="rmenu" class="clearfix rMenu-hor rMenu"> HTML Code:
<ul id="rmenu" class="clearfix rMenu-hRight rMenu"> I'll add center/right in a later version |
Quote:
Thanks Flynn |
Quote:
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
HTML Code:
div.rMenu-center { |
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 HTML Code:
ul#rmenu2 { 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:
PHP Code:
And this is the new CSS Insert HTML Code:
ul#rmenu2 { HTML Code:
div#menu1 { |
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 HTML Code:
ul.rMenu { |
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.
|
All times are GMT -6. The time now is 08:02 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.