Hi, I've been using Atahualpa with great pleasure, including the menu structure. My menu was looking like this:



Now I want to use the standard Wordpress menu's with the same result. Creating the menu was easy.

The problem is the page-center option. When I keep using with my new menu, the menu looks like this


So the div styling of the whole bar is lost. This is I think because in the new menu there's a small div just for the menu, and around it a table with no id.

I tried using %pages so the menu is aligned left, then the whole bar shows again. Then using padding-left creates the old result. The problem then is, that when looked at in a smaller screen / iphone, the result is this:


No the solution either.

How can I do this guys, using the new menu, center it but still have a menu bar over the complete width of the page with the menu's centered?

Help would be greatly appreciated!

What version of atahualpa and wp?
What is the URL?
Have you applied the menu bugfix's (new version &updates forum)?

Hi JD, sorry for the delay. I use Atahualpa version 3.5.3 and Wordpress 3.0.1. Yes I used the menu bugfix, working properly.

I think the solution would be in using %pages in header so it's aligned left, but then referring to just the menu to center. But how do I do that?

The sourcecode for the menu is this:

<div id="menu1" class="menu-home-container"><ul id="rmenu2" class="clearfix rMenu-hor rMenu"><li id="menu-item-400" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-16 current_page_item menu-item-400"><a title href etc.....

What do I put in CSS to just center the menu then?

Do an export of your settings and attach it to a reply

see if this helps - http://forum.bytesforall.com/showthread.php?t=2548

ok, here is how you can do it. First edit bfa_new_wp3_menus.php and change line 13 (version 3.5.3) from

		$before_menu = '<table cellpadding="0" cellspacing="0" style="margin: 0 auto"><tr><td align="center">';

to

		$before_menu = '<table class="menu-center" cellpadding="0" cellspacing="0" style="margin: 0 auto"><tr><td align="center">';

next add the following to the CSS Inserts

table.menu-center {
width: 100%;
}
#rmenu2-page {
margin-left: 20%;
margin-right: auto;
}

you may need to adjust the left margin depending on the width of your menus

Hi JD, adding the class and the width 100% in CSS did the trick!

The second code

#rmenu2-page {
margin-left: 20%;
margin-right: auto;
}

didn't work...

Just added padding-left to div#menu1 did work though! Can't work with percentages (no idea why), but with pixels it worked.

All working good now, thanks for your help, made a donation!

Keep up the good work