Wordpress Themes - WP Forum at BFA - Custom Page menu

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - Custom Page menu - width problem (http://forum.bytesforall.com/showthread.php?t=18148)

Custom Page menu - width problem

I think I am having a problem with the menu width on a client's (test) site. She is viewing it with her iPad and says that the last menu tab is wrapping to a second row. I don't have access to an ipad so I cannot see it myself.

The menus look/work fine on my monitors and also on various platforms at QuirkTools - http://quirktools.com/screenfly

The page menu needs to have a specific height, color, 2px separators, and span evenly from border to border... which it appears to be doing correctly as it is now.

My menu spacing is currently coded (ATO>>CSS inserts) as:

Code:

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {

padding: 15px 2.97em;

}

div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {

padding: 15px 2.97em !important;

}

I have tried many variables and this fits best... on my screens.

I cannot replicate the problem she is having and was hoping for some insight from one of the many experts here.

The test site url - http://sheryl.wordpressproservices.com
Using:
Wordpress 3.4.1
Atahualpa 3.5.3 (all theme fixes have been applied)
Wordpress menus
CSS menu codes currently in use:

Code:

/* MENU BARS */





div#menu1 ul.rMenu-hor li.rMenu-expand a {

        background-image: none;

        }



ul.rMenu-ver {        

background: #699864 !important;

border-left:solid 8px #E9E0BD;

border-bottom:solid 8px #E9E0BD;

border-top:solid 4px #E9E0BD;

border-right:solid 8px #E9E0BD;

text-align:left !important;



}



ul.rMenu-ver a:link, ul.rMenu-ver a:visited, ul.rMenu-ver a:active {

        color: #fff !important;                

}



ul.rMenu-ver a:hover {

        color: #333 !important;        

}



div#menu1 ul.rMenu li.rMenu-expand li a, div#menu2 ul.rMenu li.rMenu-expand li a {

padding: 10px 5px !important;

}



div#menu1 ul.rMenu {

background: transparent;

border: none !important;

}



/* Adjustments for the menu bars, which in their default 

state have 1px borders plus -1px margins to avoid 1+1=2px 

borders between neighbor items. */

ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }

ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }

ul.rMenu-hor { padding-left: 0px; }

ul.rMenu-ver li { margin-top: 0xp; }



div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {

padding: 15px 2.97em;

}

div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {

padding: 15px 2.97em !important;

}



/* Space between items of page menu bar */

div#menu1 ul.rMenu li {

margin-right: 2px;

}



/* Reset margin for 2nd+ level items */

div#menu1 ul.rMenu li li {

margin-right: 0;

}



div#menu1 {

border: none !important;

}

Thanks in advance for taking the time to help.

why aren't you useng version 3.7.7?

Because I am used to this version, have been using it since it came out, and have all the fixes in place. I do have the new version set up on another test site... just prefer 3.5.3.

Would the new version solve the problem at hand?

same issue shows up in FireFox on a mac changing teh 2.98em to 2.89em fixed it there

Thanks for checking jugglegad. The only problem with changing that em is that it will be shorter on other browsers and os's.

I adjusted the layout width to 985px with 20px R/L padding and set the following:

ATO >>Style Edit HEADER AREA

Code:

<div style="width:945px; margin:0 auto; padding:0;">%page-center</div>

ATO >>HTML/CSS Inserts

Code:

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {

padding: 15px 44px;

}

div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {

padding: 15px 44px !important;

}

This seems to produce a uniform result in FF, Chrome, Safari, and even IE.

I have a call scheduled with the client on Mon. and will see how it looks on her iPad.

Ah it's so nice that all browsers work the same...not...
I read awhile ago that it is going to get worse with all the mobile devices...

Wouldn't it be nice if there was a standard that all browsers and mobile devices had to adhere to!

It's a constant learning curve... day in and day out.

Hello Sir can you help me with this one? This is my client's site heynatureshop dot com, i want to move the menu bar near in the logo..please help :-(

@bloggerjan - sure, switch to the Atahualpa theme - after all, Atahualpa is the theme this forum supports.