Hi again! I am still working on my site http://frugalmommytoday.com and want my page menu and category menu bars centered. I put %page-center in ATO>Style & Configure Header Area and it centered the menu bar, but there are two problems.

First, I would like the background color of the page menu bar to extend the width of my website.

Second, I don't want the dashed border around the page menu bar.

Please help!

What I do for centered menus is wrap %page-center in a div and style it as needed such as the following changing the background color to what you want.

<div style="width:100%;background-color:#000;">%page-center</div>

I don't see a dashed border on your site. Did you take care of that?

Larry,

Where do you add <div style="width:100%;background-color:#000;">%page-center</div>?

I've figured out how to center the menu, move it below the header, but I want it to be in a box and spread across the page just like http://frugalmommytoday.com/

My site is currently at http://mamatrue.westhostsite.com/.

Thanks!

ATO->Style & edit HEADER AREA->Configure Header Area

Thanks lmilesw! And yes, I was able to get rid of the border prior to your response. I included "div#menu1" in the ATO>CSS/HTML Inserts and said "border:none". It worked, but is that the correct way to do it?

Also, the 100% width made my bar go across the screen, however, there was still about 20px in gaps on the left and right hand sides so I was only able to remove that space by putting "0" for the padding in the layout container. But now the comments list for my post shifts right up to the left-hand side of the container. First, did I get rid of the spaces on the left and right-hand sides the right way?
And what is the div selector (? on name) for the comments list to add padding to the left-hand side of it?

I would probably use border: 1px solid #8A6E53 in your instance as border none sometimes is iffy.

I am not clear on what you mean about the 0 padding and comments list.

I will use that border then.

What I mean about the padding is by default the container has padding of (I believe) 20px. Since that is applied to everything, there was also 20px padding to the left of the menu bars and to the right. I don't want the padding for the menu bars...I want both edges flush up against the container border. Are you following me?
So what I did was put the container padding to 0. So now, my menu bars are flush up against the side (as you can see on my site http://frugalmommytoday.com) but now everything else is flush up against the left-hand side of the container (except the posts because I was able to add padding to the container in ATO) Now, look click on the comments link and you will see the comments title is flush up against the left-hand side of the container. How do I remove that space?

I guess there are 2 questions I need your help with:
1. Was it right for me to remove the entire layout container left and right- hand padding to make the page menu bars flush with the container border? Or is there a better way?

2. if there isn't a better way, how can I add padding to the comment container so the title "2 comments to hello world" is not flush against the left-hand side?

Often there is no wrong or right way. There is just a way or are ways that work and yours works but then you have to add padding to other areas to compensate. For the comments something like the following may do what you want. I also added padding so the next/previous navigation lines are not flush as well.

.navigation-top, .navigation-middle {margin-left:20px;margin-right:20px;}#comments {padding-left:20px;}

Wow, lmilesw. Thanks for your help :-) I used the comment div you provided me with, but removed the navigation lines. I had no idea where to style (or remove) them but by you including the navigation div, it hinted to me that it was in the next/previous navigation area of ATO.

I got it! Dealing with any css or even adding <div> or anything like it is very far out of my realm of understanding. I somehow managed to set the page menu bar below my header and got rid of the rounded corners but it was in the midst of experimenting so I have no idea where I actually did that. Could you tell me?

Now, I would like the page menu bar items to spread across the full width of the bar. My site is at http://mamatrue.westhostsite.com/. Can you please help?

moving the items around in the header is easy. At ATO->Style & edit HEADER AREA->Configure Header Area the order LEFT to RIGHT you put things, is how they will show up TOP to BOTTOM.

There is no automatic way to spread menu items across the width of the page, for one thing, it depends how wide someone makes the page on their monitor. If I make your site narrow enough, the menu is the width of the window and if I make it smaller, the menu goes to two lines.

You can add left and right padding to each menu item, but different width views of the site, will give different looks...and if you do add the padding, the sub-menu's may be affected, so you would have to add more CSS to reverse the padding for the sub-menus.

menus and the CSS for them is the most complicates area of a site.

In your case Sonya go to ATO>Style & edit Header Area and in the Configure Header Area box I would replace %page-center with the following.

<div style="width:100%;background-color:#5A85C1;">%page-center</div>

If you tried using the code above a bit ago and it didn't work there was a missing quote. The code is now correct.

I appreciate hearing its complicated. It makes it less frustrating that it's so hard. Where can I add padding? What I'm trying to do is get the menu spaced across the page the way that http://frugalmommytoday.com has hers. I've tried going to look at the page source and have tried using firebug. I just can't figure out where to look or what I'm looking for.

Thanks!!

Sonya, first I would like to say I know how frustrating dealing with the menu bar is!! I spent a good couple weeks trying to figure it out. To space the items, I inserted the following into ATO>HTML/CSS Inserts:
/* Space between items of page menu bar */
div#menu1 ul.rMenu li a {
margin-right: 0;
padding-right: 12px;
padding-left: 12px;
}
Hope this helps!