lizannehart

ok. seems easy, but not quite working. i copied and updated code for the first 2 of 6 menu items, but now they have disappeared completely from view. the old text is not showing, but neither are the new images. following is the code i added to the child theme style.css. any thoughts?

#menu-item-246 a {
display:block; height:20px; width:65px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('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; text-indent:-9999px;
background-image:url('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('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('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('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('Menu_Master-19.jpg'); background-position:-65px -40px;
}

Thanks Nicki! I should explain that I got the code from an automatic generator I found online for sprite images (I’m not a coder). My question is super basic. Where do I put this information? In which document (or documents) in my child theme and where (exactly)?

I have a created a sprite image that I would like to use to replace my navigational menu in twenty eleven. I have the sprite uploaded under twentyelevenchild/images, and I have what I believe is proper XHTML and CSS code. But I don’t know where to place each piece to pull it all together. The site is still in maintenance mode. Can anyone help?

XHTML:

<ul id="navigation">
		<li id="navigation-1"><a href="https://www.rosemaryahern.com" title="Home"><span>Home</span></a>
		<li id="navigation-2"><a href="https://www.rosemaryahern.com/about" title="About"><span>About</span></a>
		<li id="navigation-3"><a href="https://www.rosemaryahern.com/services" title="Services"><span>Services</span></a>
		<li id="navigation-4"><a href="https://www.rosemaryahern.com/testimonials" title="Testimonials"><span>Testimonials</span></a>
		<li id="navigation-5"><a href="https://www.rosemaryahern.com/books-by" title="Books By"><span>Books By</span></a>
		<li id="navigation-6"><a href="https://www.rosemaryahern.com/contact" title="Contact"><span>Contact</span></a>

CSS:

/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/

ul#navigation {
	width:410px;
	list-style:none;
	height:20px
}

ul#navigation li {
	display:inline
}

ul#navigation li a {
	height:20px;
	float:left;
	text-indent:-9999px;
	text-decoration:none
}

ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
	background-position:0px -20px
}
ul#navigation li#navigation-1 a.current {
	background-position:0px -40px
}

ul#navigation li#navigation-2 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -65px 0
}

ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
	background-position:-65px -20px
}
ul#navigation li#navigation-2 a.current {
	background-position:-65px -40px
}

ul#navigation li#navigation-3 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -130px 0
}

ul#navigation li#navigation-3 a:active,
ul#navigation li#navigation-3 a:hover {
	background-position:-130px -20px
}
ul#navigation li#navigation-3 a.current {
	background-position:-130px -40px
}

ul#navigation li#navigation-4 a {
	width:85px;
	background:url(Menu_Master-19.jpg) no-repeat -195px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-195px -20px
}
ul#navigation li#navigation-4 a.current {
	background-position:-195px -40px
}

ul#navigation li#navigation-5 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -280px 0
}

ul#navigation li#navigation-5 a:active,
ul#navigation li#navigation-5 a:hover {
	background-position:-280px -20px
}
ul#navigation li#navigation-5 a.current {
	background-position:-280px -40px
}

ul#navigation li#navigation-6 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -345px 0
}

ul#navigation li#navigation-6 a:active,
ul#navigation li#navigation-6 a:hover {
	background-position:-345px -20px
}
ul#navigation li#navigation-6 a.current {
	background-position:-345px -40px
}

[please remember to mark any posted code -https://codex.www.ads-software.com/Forum_Welcome#Posting_Code ]