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 »

[SOLVED] Troubles with sizing parent menu tab during hover.


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 Dec 31, 2010, 07:40 AM
Cheers
 
105 posts · Jun 2010
Greetings all. I have been modifying the menu items on my website and have done fairly well considering my limited knowledge of coding, but I have a problem I haven't been able to figure out. My website is https://winekitmaking.com and my problem is with the FAQ menu tab. All is well until I put my cursor over the FAQ menu tab and then the FAQ tab along with the child submenus jumps up about 4 pixels. Once the cursor actually goes over the child menu items the FAQ tab goes to the correct size. So It's only when the cursor is over the FAQ tab that the problem is apparent. Where would I change that and what coding would I use? Help greatly appreciated.

Last edited by Cheers; Dec 31, 2010 at 07:43 AM.
  #2  
Old Dec 31, 2010, 10:22 AM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
Check the hover properties for the menus. It looks like there are some padding issues.
__________________
~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 Dec 31, 2010, 10:28 AM
Cheers
 
105 posts · Jun 2010
Where would I check those hover properties? I even tried adding code like:

div#menu1 ul.rMenu li a:hover, div#menu2 ul.rMenu li a:hover {
padding: 4px 6px;
color: #fff;
}

to the "Add Html/Css inserts of atahualpa with no success.

Last edited by Cheers; Dec 31, 2010 at 10:34 AM.
  #4  
Old Dec 31, 2010, 10:55 AM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
I would look in CSS Inserts and see if you have any conflicting code. What code have you added?
__________________
~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.
  #5  
Old Dec 31, 2010, 11:53 AM
Cheers
 
105 posts · Jun 2010
Quote:
Originally Posted by lmilesw
I would look in CSS Inserts and see if you have any conflicting code. What code have you added?
Well, I've been working on this for a long time and have made many changes. Couldn't tell you what changes have been made off hand, but here is the code as it exists today. You, I'm sure, would know better than I what changes have been made. Problem is that I don't find any hover code except what I have added and that does nothing. All I can do with that is change the color of the text in the hover state.

.blogtitle {display:none !important;}

td#header {
padding-bottom: 15px;
}
div.searchbox {
position: absolute;
top: 50px;
right: 25px;
}
div.searchbox input.text {
border: solid .5px #ffe8a3;
padding: 2px 15px 2px 3px;
background: #fff url('<?php bloginfo('template_directory'); ?>/images/search2.gif') no-repeat right center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 15px;
bolder: solid 1px #e7e7e7;
font-size: 11px;
}

a.posts-icon {
position: absolute;
top: 85px;
right: 160px;
font-weight: normal;
color: #70097f;
font-size: 11px;
}
a.comments-icon {
position: absolute;
top: 85px;
right: 20px;
font-weight: normal;
color: #70097f;
font-size: 11px;
}


a.email-icon {
position: absolute;
top: 85px;
right: 10px;
font-weight: normal;
color: #70097f;
font-size: 11px;
}



div#menu1 ul.rMenu {
background: transparent;
border: none;
}

div.widget ul li {
padding: 1px 5px 1px 13px !important;
background: url('<?php bloginfo('template_directory'); ?>/images/bullets/purple-box.gif') no-repeat 0 7px;
}
div.widget ul li a:hover {
text-decoration: underline;
}

/* Menu Bars */


/* 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: 2px; }
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: 4px 6px;
color: #fff;
}

div#menu1 ul.rMenu li a:hover, div#menu2 ul.rMenu li a:hover {
padding: 4px 6px;
color: #fff;
}

/* different padding for parents with arrow image */
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 4px 22px 0px 10px !important;
background-position: 97% 50% !important;
}
/* less padding for children with arrow image */
div#menu1 ul.rMenu li.rMenu-expand li a, div#menu2 ul.rMenu li.rMenu-expand li a {
padding: 4px 22px 0px 10px !important;
background-position: 97% 50% !important;
}

a.comments-icon:link,a.comments-icon:active,a.comments-icon:visited {
background:transparent url(https://www.winekitmaking.com/wp-con...es/comment.png) no-repeat scroll center left
}

a.posts-icon:link,a.posts-icon:active,a.posts-icon:visited {
background:transparent url(https://www.winekitmaking.com/wp-con...images/rss.png) no-repeat scroll center left
}

a.email-icon:link,a.email-icon:active,a.email-icon:visited {
background:transparent url(https://www.winekitmaking.com/wp-con...ages/email.png) no-repeat scroll center left
}

/*
ul#rmenu {
padding:5px;
}
*/
div#menu2 {
background: #666666;
}
div#menu1 {
background: #f9f7e4;
}


/* XX comments to .... */
h3#comments {
margin: 10px 0;
padding: 10px;
font-weight: normal;
background: #f5f5f5;
}

ul.commentlist {
border-top: 0;
margin: 0;
line-height: 1.4;
font-size: 12px;
}
ul.commentlist li.thread-odd, ul.commentlist li.thread-even {
margin: 5px 0;
padding: 10px;
border-bottom: solid 5px #fafafa;
background: #fff;
}
span.authorname, span.authorname a {
font-weight: normal;
font-size: 17px !important;
}
div.commentmetadata a {
color: #999;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

Last edited by Cheers; Dec 31, 2010 at 12:14 PM.
  #6  
Old Dec 31, 2010, 01:05 PM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
I would start playing around with your arrow image padding code. I see an xp that should be px but that doesn't appear to be an issue.
__________________
~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 Dec 31, 2010, 01:35 PM
Cheers
 
105 posts · Jun 2010
OK. Good advice. You're going to make a "code monkey" out of me yet!

Not really knowing what I'm doing, I figured I would duplicate the code for the menu and add hover and then monkey around. Success except for the fact that the hover text now "scrunches down" to the lower right when the cursor goes over the FAQ tab. What I did was duplicate the top code series and then modified it to accommodate the Hover mode below. It works, except what can I do about the "scrunching text"? https:winekitmaking.com (Re the FAQ tab)

/* different padding for parents with arrow image */
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 4px 22px 0px 10px !important;
background-position: 97% 65% !important;
}

/* different padding for parents with arrow image in hover mode */
div#menu1 ul.rMenu li.rMenu-expand a:hover, div#menu2 ul.rMenu li.rMenu-expand a:hover {
padding: 8px 24px 0px 10px !important;
background-position: 97% 65% !important;
}
  #8  
Old Dec 31, 2010, 01:51 PM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
I am kind of baffled that you should have to mess much with the code. What you have is a pretty basic menu. What happens if you use no menu code at all in CSS Inserts? All of the configuration you should have to do is in ATO>Menu 1 and Menu 2. Have you made any changes to css.php?
__________________
~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 Dec 31, 2010, 03:20 PM
Cheers
 
105 posts · Jun 2010
I've been doing a bit of customizing because I wanted the menu tabs to be a little smaller. I think it looks better. All was well until I tried adding a menu item that had submenus. Then I ran into problems. I think the problems are small and so would like to pursue the solution to this problem. I think it will boil down to some simple css change and, of course, I'm relying on you to provide the intelligence!!!
Don't mean to abuse your good nature, just need your expertise.

Anyway, let's let this drift until next year, and I will wish you a very happy and prosperous new year. Back on this problem tomorrow. Cheers! Appreciate your kind assistance and will go diamond asap.
  #10  
Old Jan 5, 2011, 07:11 AM
Cheers
 
105 posts · Jun 2010
Hi again, Just wondering if anyone has a solution for the "Scrunching Text" in my faq menu button. Any hints?
  #11  
Old Jan 5, 2011, 11:04 AM
juggledad's Avatar
juggledad
 
21,968 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
that has to do with the padding you have set up in the CSS Inserts - you have
HTML Code:
/* different padding for parents with arrow image */ 
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 4px 22px 0px 10px !important;
background-position: 97% 65% !important;
}

/* different padding for parents with arrow image in hover mode */ 
div#menu1 ul.rMenu li.rMenu-expand a:hover, div#menu2 ul.rMenu li.rMenu-expand a:hover {
padding: 8px 24px 0px 10px !important;
background-position: 97% 65% !important;
}
so it's padded at the top by 4ph then when you hover, the top is padded 8px.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #12  
Old Jan 5, 2011, 11:56 AM
Cheers
 
105 posts · Jun 2010
I set all of those parameters now to be Identical, but now when you hover the text Squishes up and to the left and when the drop down menu comes out, you can see that the FAQ menu tab lifts up (shortens upward) by about 4 px.

Last edited by Cheers; Jan 5, 2011 at 12:10 PM.
  #13  
Old Jan 5, 2011, 12:12 PM
Cheers
 
105 posts · Jun 2010
I set it back to what it was. Even though the text now squishes down and to the left in hover mode, at least the FAQ tab remains the right size. Strange problem!
  #14  
Old Jan 5, 2011, 02:50 PM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
Did you add any code for the menus anywhere other than ATO>Add HTML/CSS Inserts>CSS Inserts? The default menu should have worked fine for you with maybe a few tweaks.
__________________
~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.
  #15  
Old Jan 7, 2011, 04:59 AM
Cheers
 
105 posts · Jun 2010
Not that I'm aware of. Actually, I wouldn't know where else to put any other menu code.
  #16  
Old Jan 7, 2011, 06:48 AM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
Could you export your setting and attach to a reply? I would like to take a look at your other settings. Also when looking at your CSS I noticed you have a display none for the blog title. Is there a reason you hid it that way rather than setting "Show Blog Title to No?
__________________
~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.
  #17  
Old Jan 7, 2011, 10:12 AM
Cheers
 
105 posts · Jun 2010
Quote:
Originally Posted by lmilesw
Could you export your setting and attach to a reply? I would like to take a look at your other settings. Also when looking at your CSS I noticed you have a display none for the blog title. Is there a reason you hid it that way rather than setting "Show Blog Title to No?

re: the title. I probably figured that there was no need because I was using a graphic logo. I set it now to "yes". I know that I had a bit of a battle to get the blog title to show up wrapped in H1 tags and finally managed to get that in the source code. Sorry, right now I don't know how I accomplished that. I probably had advice from you and juggledad.

Now, I just updated to Atahualpa 3.6 and only ran into one little problem, that being that I had to select the menu again in the Menu/Theme locations. Other than that, It went smoothly.

Before I switched themes, I exported the Atahualpa settings and am attaching file as per your request. Much appreciated.
Attached Files
File Type: txt ata-winekitmakingcom-20110107.txt (21.4 KB, 258 views)
  #18  
Old Jan 7, 2011, 02:13 PM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
I just took a look at your settings. I first added a missing # before the color hex number in ATO>Menu1.

You had
HTML Code:
solid 1px f9f7e4
and it should be
HTML Code:
solid 1px #f9f7e4
Then I took out all the code shown below from ATO>Add HTML/CSS Inserts>CSS Inserts and the menus started behaving. You should probably copy all the content of CSS Inserts and paste it into a text document as a backup.

HTML Code:
/* Menu Bars */


/* 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: 2px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0px; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 4px 6px;
color: #fff;    
}

/* different padding for parents with arrow image */ 
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 4px 22px 0px 10px !important;
background-position: 97% 65% !important;
}

/* different padding for parents with arrow image in hover mode */ 
div#menu1 ul.rMenu li.rMenu-expand a:hover, div#menu2 ul.rMenu li.rMenu-expand a:hover {
padding: 8px 24px 0px 10px !important;
background-position: 97% 65% !important;
}

/* less padding for children with arrow image */ 
div#menu1 ul.rMenu li.rMenu-expand li a, div#menu2 ul.rMenu li.rMenu-expand li a {
padding: 4px 22px 0px 10px !important;
background-position: 97% 65% !important;
}
__________________
~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.
  #19  
Old Jan 8, 2011, 05:09 AM
Cheers
 
105 posts · Jun 2010
I corrected the color code. Good observation. And then I removed all the code as suggested except I left in the following to give a white text on the menu tab:

/* Menu Bars */

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
color: #fff;
}

But it still doesn't work properly. The FAQ tab is about 4 pixels too large, but during hover it is the correct size, and then when you slip off to the submenus it is again about 4 pixels too large.
  #20  
Old Jan 8, 2011, 06:03 AM
juggledad's Avatar
juggledad
 
21,968 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
your setting at ato->MENU 1 (Page Menu)->Font Size & Face is causing the issue
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #21  
Old Jan 8, 2011, 06:54 AM
Cheers
 
105 posts · Jun 2010
Hmmm, That didn't do the trick either. I set the font sizes to the default and added quote marks as per side instructions and still have the same problem. So I have reset it back to what it was.


It is now:
12px "Verdana", "Arial", "sans-serif"

Just to clarify, Am I correct in assuming ato is short for Atahualpa Options?

Last edited by Cheers; Jan 8, 2011 at 06:56 AM.
  #22  
Old Jan 8, 2011, 07:05 AM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
What did you see JD? When I imported his settings and made the changes mentioned all was good for me.
__________________
~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.
  #23  
Old Jan 8, 2011, 07:11 AM
Cheers
 
105 posts · Jun 2010
Larry, I'm just wondering if the problem stems from the fact that somewhere (I don't remember where ) I reduced the size of the menu tabs from the default. Probably the reason your menu looked good was that you are looking at a menu that has not been manipulated. I will try to find out where I made that change and perhaps that will solve the problem but leave me with a larger menu.
  #24  
Old Jan 8, 2011, 07:19 AM
lmilesw's Avatar
lmilesw
 
10,053 posts · Jul 2009
Central New York State USA
And just reducing the font size will reduce the size of the menu. Let us know if you find what you did.
__________________
~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.
  #25  
Old Jan 8, 2011, 07:24 AM
Cheers
 
105 posts · Jun 2010
I just took a brand new, unmodified copy of Atahualpa 3.6 and copied all the default CSS insert code and pasted it in my site. Same problem with the FAQ tab being larger than all other tabs. So we can discount the CSS code as being the problem.

Bookmarks

Tags
hover menu, parent menu, size of menu tabs

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Great Menu 1 (Page Menu) Tab that links directly to another site?? tim55057 Page & Category Menu Bars 2 Oct 5, 2010 04:42 PM
Removing tab from header menu glennvogelsang Page & Category Menu Bars 2 Aug 3, 2010 09:55 AM
Please help with new twenty ten theme, menu troubles dvv1 Page & Category Menu Bars 1 Jul 19, 2010 12:54 PM
h1 h2 h3 etc sizing control caseyfern Header configuration & styling 15 Feb 15, 2010 04:45 AM
Re-sizing Images feastfresh Atahualpa 3 Wordpress theme 1 Mar 17, 2009 04:17 PM


All times are GMT -6. The time now is 06:34 PM.


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