Twenty Eleven – images replacing menu text – but 1 problem with submenu

hmmm…I am not an expert – I just know what I know ?? – the child style.css will over ride the parent though. But I don’t know if your child theme is active – or where you are adding the new coding. I wish I could be more helpful! Without knowing what you are altering it is kind of impossible for me to know. Sorry I can’t be of more help!

it is active, and contains only overrides to the code, as follows:

/*
Theme Name: twentyelevenchild
Description: Child theme for the twentyeleven theme
Author: Lizanne Hart
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

/* Add your over ride rules below this line */

body, input, textarea {
	color: #000000;
	font: 15px Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}
#access {
	background: #fff; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	text-align: center;
	margin: 0 auto 6px;
	width: 100%;
}
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
	display: inline-block;
}
#access div {
	margin: 0 0 0 0;
}
#access li:hover > a,
#access ul ul :hover > a {
border : none;
background-color : #fff;
color : #fff;
text-decoration:none;
}
#access ul li:hover > ul {
display: block;
}
#branding {
border: none;
}
#branding {border-top: 0px solid #BBBBBB; }
#access {box-shadow: none;
}
#menu-item-246 a {
display:block; height:20px; width:65px; padding:0px; outline:none;
background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px 0px;
}
/* Hover */
#access li.menu-item-246.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-246.menu-item-object-page a:focus {
display:block; height:20px; width:65px; padding:0px; outline:none;
background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px -20px;
}
/* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
-------------------- */

#access li.current-menu-item.menu-item-246 > a, #access li.current-menu-ancestor.menu-item-246 > a, #access li.current_page_item.menu-item-246 > a, #access li.current_page_ancestor.menu-item-246 > a
{ background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px -40px;
}
#menu-item-260 a {
display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:-65px 0px;
}
/* Hover */
#access li.menu-item-260.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-246.menu-item-object-page a:focus {
display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:-65px -20px;
}
/* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
-------------------- */

#access li.current-menu-item.menu-item-260 > a, #access li.current-menu-ancestor.menu-item-260 > a, #access li.current_page_item.menu-item-260 > a, #access li.current_page_ancestor.menu-item-260 > a
{ background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:-65px -40px;
}

Unless your site is readily accessible, it is almost impossible to be of much help with things like this.

Not sure what all you’ve done, but generally, you cannot just copy CSS code from someplace else (i.e. the external generator) into your existing menu CSS because the CSS selectors won’t be the same. Did you modify the CSS and/or HTML accordingly?

I understand. I’ve deactivated Maintenance Mode temporarily. For now, I’m using the code suggested by the forum user, customized with my sprite size increments and menu IDs (which I got from the page source code).

https://www.rosemaryahern.com

Thanks so much!

Are you using Firebug to work on this?

Firebug shows that a cache css file is over-riding at least some of your child theme styles.

I just downloaded Firebug and am learning to use it. Where do you see that note and how do I fix it?

Upon inspection, it seems to be related to a plugin that I installed called “Styles.” I deactivated it. Issues:

1. Now I see BOTH the original text menu and the sprite (only the Home page portion is programmed). How do I get rid of the text menu?

2. How do I get rid of the black box?

3. Why is there a thin line separating header and menu and how to delete? I thought I changed this in header options, but it has popped up again with all the menu work I’ve been doing.

Thanks.

When you look at the menu using Firefox — you can see in the right-hand Firebug panel — the styles assigned to the element — and where those styles are coming from.

I don’t know where cache.css is coming from — looks like you got rid of whatever was creating it?

You have to add text-indent: -9999px;

Yes, I deactivated the Styles plugin.

I am poking around in Firebug (and, while I learn this great tool, I am working against a deadline). Can anyone tell me specifically in which lines to find/fix the following errors?

1. I see BOTH the original text menu and the sprite. I’d like to get rid of/turn off the text menu.

2. I need to lose the black box?

3. I want to delete the thin line separating header and menu.

P.S. Nicki: Will do!

How cool! I see that adding the text-indent:-9999px; bit got rid of the text menu. I’m now down to two questions:

2. How do I lose the black box?

3. I want to delete the thin line separating header and menu.