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 »

Please help me with the menu bars centering and background color


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 Oct 22, 2010, 02:41 PM
frugalmommytoday
 
71 posts · Oct 2010
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!
  #2  
Old Oct 22, 2010, 07:39 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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.
HTML Code:
<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 (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 Oct 22, 2010, 11:32 PM
sonya
 
15 posts · Jun 2009
Austin, TX
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!
  #4  
Old Oct 23, 2010, 06:26 AM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ATO->Style & edit HEADER AREA->Configure Header Area
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 23, 2010, 12:01 PM
frugalmommytoday
 
71 posts · Oct 2010
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?
  #6  
Old Oct 23, 2010, 12:10 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #7  
Old Oct 23, 2010, 12:35 PM
frugalmommytoday
 
71 posts · Oct 2010
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?
  #8  
Old Oct 23, 2010, 03:36 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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.
HTML Code:
.navigation-top, .navigation-middle {margin-left:20px;margin-right:20px;}#comments {padding-left:20px;}
__________________
~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.
  #9  
Old Oct 23, 2010, 07:22 PM
frugalmommytoday
 
71 posts · Oct 2010
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.
  #10  
Old Oct 29, 2010, 12:00 AM
sonya
 
15 posts · Jun 2009
Austin, TX
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?
  #11  
Old Oct 29, 2010, 07:18 AM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Oct 29, 2010, 07:32 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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.
HTML Code:
<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.
__________________
~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.

Last edited by lmilesw; Oct 29, 2010 at 12:25 PM.
  #13  
Old Oct 29, 2010, 10:56 AM
sonya
 
15 posts · Jun 2009
Austin, TX
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!!
  #14  
Old Nov 1, 2010, 08:29 PM
frugalmommytoday
 
71 posts · Oct 2010
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!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Page menu bar - background color sub menu bdix Page & Category Menu Bars 9 Mar 11, 2013 02:57 AM
[SOLVED] Background color:hover not working for 'category' items in menu 1 (page menu akg Center area post/pages 4 Sep 27, 2010 08:08 AM
[SOLVED] How do i make these page/cat menu background bars go away? Superbob0000 Page & Category Menu Bars 2 Sep 5, 2010 01:49 PM
centering the horizontal bars interage Header configuration & styling 2 Apr 25, 2009 08:45 AM
Centering BOTH Page and Category menu bars paulae Page & Category Menu Bars 1 Mar 21, 2009 09:09 AM


All times are GMT -6. The time now is 04:10 PM.


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