Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Custom Page menu - width problem


  #1  
Old Aug 10, 2012, 10:10 AM
cabdziner
 
17 posts · Feb 2011
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.
  #2  
Old Aug 10, 2012, 11:45 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
why aren't you useng version 3.7.7?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Aug 10, 2012, 11:52 AM
cabdziner
 
17 posts · Feb 2011
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?
  #4  
Old Aug 10, 2012, 07:39 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
same issue shows up in FireFox on a mac changing teh 2.98em to 2.89em fixed it there
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Aug 11, 2012, 12:09 PM
cabdziner
 
17 posts · Feb 2011
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.
  #6  
Old Aug 11, 2012, 12:29 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Aug 11, 2012, 12:52 PM
cabdziner
 
17 posts · Feb 2011
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.
  #8  
Old Apr 23, 2013, 04:26 AM
bloggerjan
 
1 posts · Apr 2013
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 :-(

Last edited by juggledad; Apr 23, 2013 at 06:12 AM.
  #9  
Old Apr 23, 2013, 06:11 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
@bloggerjan - sure, switch to the Atahualpa theme - after all, Atahualpa is the theme this forum supports.

Last edited by juggledad; Apr 23, 2013 at 06:13 AM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] How to select page width for a custom page template? raymasa Header configuration & styling 2 Mar 19, 2012 09:23 AM
[SOLVED] Custom Top level menu size + span the menu accross the width of the page muthukumarp Page & Category Menu Bars 11 Dec 9, 2011 01:42 PM
Problem: Width of sub-menu items is not 100% logocar3 Page & Category Menu Bars 6 Dec 5, 2011 06:44 AM
Sub menu width problem with WP3 garnpet Page & Category Menu Bars 5 Jun 18, 2010 11:58 AM


All times are GMT -6. The time now is 08:20 PM.


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