How to replace text with an image in Twenty Fourteen theme main menu

I don’t see a menu-item-561 on the page? Is it 585?

BTW I have an el Degas MT8 that I got 40 years ago. Love guitar!

yes sorry.
this still doesn’t work
li#menu-item-585.nav-facebook menu-item menu-item-type-custom menu-item-object-custom menu-item-585 a {
background: url(https://www.farleyhillmusic.co.uk/wp-content/uploads/2015/01/facebook-menu.png) no-repeat 0 0;
text-indent: -9999px;
}

any clues to why?

unfortunately I know nothing about guitars this is a client of mine ??

Hi Stacey,

I got the FB image to display under the text using this CSS:

.menu-item-585 {
  background-image: url("/wp-content/uploads/2015/01/facebook-menu.png");
  background-repeat: no-repeat;
}

Not obviously this can be altered to suit, but it seemed to work for me

Obviously, you seem to know what you are doing with CSS so i will leave the rest to you, but I have given you the basic code to get the background image working.

Good luck

Thanks so much for your quick response.
I’m having trouble switching off the hover on that custom li image
.menu-item-606:hover,.menu-item-606 a:hover{
}
these don’t work.
I have tried background-color #000; and background-color:none; , no luck.

Could you help please.

Have you tried:

.menu-item-606:hover, .menu-item-606 a:hover {
  background: none !important;
}

yes still no good.

I want to remove the hover completely from this li and just keep the image.

Ok, i think the thing to do here is remove any custom :hover effects you have tried and then give the menu item a custom CSS class.

You can do that from advanced menu options, this will allow us to target this menu item properly. If you click on screen options in the top right of wordpress when in the “menu” section, and make sure that CSS classes it ticked.

Then give the menu item a specific CSS class, then we can start to look again. Make sure that the CSS for the background image we set earlier is changed to suit the new class, rather than .menu-item-606 etc

yes it already had a custom css class.
here is my new css which works! Just in case anybody else should have the same problem.

Thanks for helping.

.menu-item-606.nav-facebook {
background-image: url(“https://www.website here/wp-content/uploads/2015/01/facebook-menu.png”);
background-repeat: no-repeat;
height:48px;
width:44px;

}
.menu-item-606.nav-facebook:hover{
background-image: url(“https://www.website here/wp-content/uploads/2015/01/facebook-menu.png”);

}
.menu-item-606.nav-facebook a:hover{
background:none;
}