Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

how do I center justify the page menu across a set width?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 6, 2011, 02:28 PM
dutchess
 
18 posts · Jan 2011
Hi, first off, this is a great theme and an even better support forum. I am having trouble putting the finishing touches on my page menu bar. The website I am working on is bemorebold.com

The look that I want for my page menu is from this website: http://athleticgreens.com

What I want is where the page menu spans the entire width of the website but the menu items are centered/justified across the length of the center column so they are always aligned, regardless of window size.

I made some changes to my site (with the help of this forum).

To make the full width header with the fixed with center column, I used a 100% layout width with a
div.wrapbody{
width:910px !important;
in the css inserts. I am not sure if that is affecting things.

I tried wrapping the the %page-center inside a div. When I did that, the menu is 910px, but it is left justified across the page (see attached image) and does not span the entire length of the website.

this is the code I used which didn't look right:
%bar2 <div style="width: 910px;">%page-center</div>


What I would like is for the page menu to be centered, the page menu bar span the entire website, with the width of the menu items being 910px (same as the body of the site) and the items inside the menu being spaced equally across that 910px span. I want the edges of the page menu items aligning with the left and right sides of the center span regardless of window size.

I can make it look close to what I want with this:

div#menu1 ul.rMenu {
background: transparent;
border: none;
padding-left: 40px;
width: 910px;

but is still not center justified across the body text, and when I resize the website, it sometimes looks funky.

I'm hoping there is something I am missing that will make everything work out well. Any help would be appreciated.
Attached Thumbnails
Click image for larger version

Name:	page menu example 01.jpg
Views:	372
Size:	119.4 KB
ID:	1269  

Last edited by dutchess; Apr 6, 2011 at 02:34 PM.
  #2  
Old Apr 6, 2011, 10:31 PM
lmilesw's Avatar
lmilesw
 
10,085 posts · Jul 2009
Central New York State USA
I have had success wrapping the %pages in a div with an ID and then giving it a width and auto left and right margins. To space the menu items means fiddling with CSS.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Apr 7, 2011, 10:05 PM
dutchess
 
18 posts · Jan 2011
OK so I ended up using this code in the css inserts:

ul.rMenu li a {width:162px; text-align:center;}

which gave me what I wanted (evenly spaced page menu items that spanned the center 950px. the only problem is that it is offset to the left by 40 pixels. I have to use this code (the padding-left part)

div#menu1 ul.rMenu {
background: transparent;
border: none;
width: 950px;
padding-left: 40px;
}

which pushes the menu to center. This looks great as long as the screen is maximized, but as soon as the window gets minimized, the menu shifts over again.

Any idea why I need the padding-left:40px to begin with?

I would really like the page menu to be flush with the center column regardless of the screen width.
  #4  
Old Apr 7, 2011, 10:33 PM
dutchess
 
18 posts · Jan 2011
I just figured it out. Here's what I did for reference:

To make the page menu span a certain width (X) and have the individual menu items be evenly spaced:

First go to ato>style & edit header area>configure header area
type %page-center

i.e. %bar2 %page-center %bar1

next go to ato>style & configure layout>layout min width
set it as the same as the page menu width (x)
(this prevents the page menu from wrapping when the window is narrow)

finally go to ato>add html/css inserts>css inserts
type in: ul.rMenu li a {width:162px; text-align:center;}

Play with the width until it is evenly spaced.

There is potentially a better way to space the page menu options, see:
http://forum.bytesforall.com/showthread.php?t=13379

but I couldn't figure out where to insert the margin-right: auto and margin-left: auto.

This is all info I have gathered from this wonderful forum.

Enjoy!

Last edited by dutchess; Apr 27, 2011 at 12:59 AM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to justify cat-mnu items over full width? Carlo Page & Category Menu Bars 6 Feb 10, 2011 01:58 PM
[SOLVED] Correct CSS to set maximum width of center area, yet retain fluid header ima Wimbledon Center area post/pages 2 Dec 22, 2010 08:36 AM
[SOLVED] page-center and cat-center to fill the width of the site cway Page & Category Menu Bars 2 Oct 25, 2010 10:30 AM
[SOLVED] Adjusting Post Width and Setting Justify Align Note Center area post/pages 5 Sep 29, 2010 01:33 PM


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


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