Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

Centering BOTH Page and Category menu bars


  #1  
Old Mar 20, 2009, 08:21 PM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
I found the thread about centering the page menu horizontal bar. I applied that CSS code to the HTML-CSS inserts area. That covered the Page menu bar only. I added it again, this time without the number 2, and that centered the Category menu bar as well.

Then I decided to make the bars stand out by giving them contrasting background color. Now, of course, I have menu item dividers, with the main background color showing through. I don't want that....plus, now there is an extra empty item showing at the far right of the category menu. I set both to 680px. http://larchmontgazette.com/wp27/

How can I get the effect I want?

Here's the CSS I put in the insert:

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

/* 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: 680px;}
}

ul#rmenu {
margin: 0 auto;
border: 0;
width: 680px;
}

/* 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#rmenu {width: 680px;}
}
  #2  
Old Mar 21, 2009, 09:09 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Item dividers: Those are borders around the <A>'s. One way to remove them would be t change the border color of the <A>'s to the background color of the <LI>'s
HTML Code:
ul#rmenu li a {
border:1px solid #506286;
}
To give the submenus another border:
HTML Code:
ul#rmenu li ul li a {
border:1px solid #123456;
}
Third level:
HTML Code:
ul#rmenu li ul li ul li a {
border:1px solid #654321;
}
The empty tab on the right is caused by the background color of the whole menu bar
HTML Code:
ul#rmenu {
background: none; 
}
(currently set to #506286)

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
evenly spaced page menu bars phryedrice Page & Category Menu Bars 7 Aug 8, 2009 05:01 AM
[SOLVED] Dashed border still appears with page menu centering neska0209 New Versions, & Updating 6 Jul 15, 2009 05:15 AM
I want to combine the page and category menu. AlanaBay Page & Category Menu Bars 3 Jul 3, 2009 09:10 PM
centering the horizontal bars interage Header configuration & styling 2 Apr 25, 2009 08:45 AM
2 page menu bars (left and right side) possible ? Tigger Page & Category Menu Bars 2 Feb 8, 2009 02:50 PM


All times are GMT -6. The time now is 08:05 AM.


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