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.

Check the hover properties for the menus. It looks like there are some padding issues.

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.

I would look in CSS Inserts and see if you have any conflicting code. What code have you added?

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;
}

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.

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;
}

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?

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.

Hi again, Just wondering if anyone has a solution for the "Scrunching Text" in my faq menu button. Any hints?

that has to do with the padding you have set up in the CSS Inserts - you have

/* 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.

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.

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!

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.

Not that I'm aware of. Actually, I wouldn't know where else to put any other menu code.

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?

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.

I just took a look at your settings. I first added a missing # before the color hex number in ATO>Menu1.

You had

solid 1px f9f7e4

and it should be

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.

/* 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;
}

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.

your setting at ato->MENU 1 (Page Menu)->Font Size & Face is causing the issue

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?

What did you see JD? When I imported his settings and made the changes mentioned all was good for me.

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.

And just reducing the font size will reduce the size of the menu. Let us know if you find what you did.

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.