Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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


  #1  
Old Oct 22, 2010, 02:41 PM
frugalmommytoday
 
71 posts · Oct 2010
Please help me with the menu bars centering and background color

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,176 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
 
16 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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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,176 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 29, 2010, 12:00 AM
sonya
 
16 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?
  #8  
Old Oct 29, 2010, 07:18 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
  #9  
Old Oct 29, 2010, 07:32 AM
lmilesw's Avatar
lmilesw
 
10,176 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.

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 09:01 AM.


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