Niki Campbell

I don’t know – it’s hard to tell (not knowing your set-up). Right now I see the text navigation – but you say that the image is sitting in an images folder – so in the coding I would change that image link in the coding from Menu_Master-19.jpg to images/Menu_Master-19.jpg. That is assuming that the document that you are adding code to is in the parent folder to the images folder. Maybe try and absolute file reference – https://www.rosemaryahern.com/ wp-content/themes/twentyelevenchild/images/file name (for example)

It seems at one point you got the text to shift off the screen with the coding: text indent -9999px, so it must have been referencing at that point. Try it again with the new filepath to the image.

see if that works for just 1 menu item. Also try firebug – it is great tool to see what is going on behind the scenes (what code from which document is affecting your navigation)…but it is tough for me to know from the outside

okay, I tested it in firefox with firebug and the coding was not there.

where is your image sitting? what folder? you might not be referencing the image properly. Is it in an images folder? The code does not replace anything. Do you have URL to look at?

In your child theme style.css –

First get the menu-item-numbers by selecting the menu in your browser and looking at the source code. each menu item has a unique number.

Copy the code above and paste for each menu-item-## – try it for jsut a couple of them first to make sure it is displaying – change:

: the width/height to reflect the width of that menu items portion of the graphic to be seen.

it should work no problem – let me know how it goes ??

try this, it’s what worked for me: do each code for each menu item ## and change that background position accordingly

1. replace text with image

#menu-item-95 a {
display:block; height:125px; width:69px; padding:0px; outline:none; text-indent:-9999px;
background-image:url(‘images/nav2.gif’); background-position:0px 0px;
}

2. If you want a hover state

/* Hover */
#access li.menu-item-95.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-95.menu-item-object-page a:focus {
display:block; height:125px; width:69px; padding:0px; outline:none; text-indent:-9999px;
background-image:url(‘images/nav2.gif’); background-position:0px -125px;
}

3.keep hover state when on active page

/* =Menu – maintain ACTIVE STATE when it is the current page/sub-menu
——————– */

#access li.current-menu-item.menu-item-95 > a, #access li.current-menu-ancestor.menu-item-95 > a, #access li.current_page_item.menu-item-95 > a, #access li.current_page_ancestor.menu-item-95 > a
{ background-image:url(‘images/nav2.gif’); background-position:0px -125px; }

Thanks for your quick response – but that was not it (that was a css mistake of my own) – but I got it!

(In case this will help someone in the future)…here is the CSS that fixed it to override the parent menu background:

#access ul ul li.menu-item-object-page a:focus, #access ul ul li.menu-item-object-page a:active {background-image: none; height: 28px; width: 178px; text-indent: 0px; padding: 10px 0px 0px 10px; background-color: #ddd;}

I’ve got the same problem – child theme not showing up in appearance, here’s what I’ve got – if anyone has an idea of why it won’t work please help! Thanks ??
_____________________________________

>>child theme style.css in own folder – it looks like this:

/*
Theme Name: Boutique Child
Description: Child theme for the Boutique theme
Author: Niki
Template: Boutique

*/

@import url(“../Boutique/style.css”);

/*——————-[repeat canvasI]——————*/

#top-area, #footer {background-repeat: repeat !important;}

/*——————-[top menu shiftI] ——————*/

ul#top-menu { margin-top: 65px; }