Replacing link text with a image

#menu-nav li a.page-item-62{
background: url("https://cdn4.iconfinder.com/data/icons/momenticons-gloss-basic/momenticons-gloss-basic/32/information2.png") no-repeat scroll left center transparent;
padding-left: 36px;
}

Thanks Timdesain. Can you explain what that means, sorry i’m really new to this.

what is a.page-item-62 referring to?

My menu is in the side panel, do I still use #menu-nav?

if you are using wp_nav_menu or wp custom menu
try li .menu-item-xx, xx refer to page ID

else
try li .page-item-xx, xx refer to page ID

without #menu-nav

I’m sorry for not understanding this more quickly…I basically have zero idea of what i’m doing …

so i type this into my style.css

li .menu-item-100{
background: url(“https://productlove.net/wp-content/themes/mirandastheme/images/heartbig.png”) no-repeat scroll left center transparent;
padding-left: 36px;
}

?

I’ve done this and nothing happens….

Could you really dumb this down for me!?

your menu is empty
<ul class="main-nav" id="menu-nothimg"></ul>

make sure your menu appears first
then set the style

your server is case sensitive
mirandastheme <> Mirandastheme
ex:
https://productlove.net/wp-content/themes/mirandastheme/images/heartbig.png
https://productlove.net/wp-content/themes/Mirandastheme/images/heartbig.png

to set backgrond, no need to set absolute path, you can set with
background: url("images/heartbig.png") no-repeat left;
more tuts
https://www.w3schools.com/css/css_background.asp

Thanks for your response

It is the sidebarmenu that I want to alter … “About” “contact” “Submit”
not the nothimg menu

owh, i’m sorry.

change

li .menu-item-100 {
background: url("https://productlove.net/wp-content/themes/mirandastheme/images/heartbig.png") no-repeat left;
padding-left: 36px;
}

with

li .menu-item-100 {
background: url(images/heartbig.png) no-repeat scroll left center transparent;
padding-left: 36px;
}

note: your image is too big.
resize image to 24×24 px or 32×32 px

I have resized it to 32×32 and put the code in but nothing happens?

This is driving me crazy!

take it easy.
??

uninstall/ deactivate custom-menu-image plugin, please.

and where is the style before? gone?

nevermind, add this to style.css

#menu-item-103 a ,
#menu-item-104 a ,
#menu-item-105 a {
background: url(images/heartbig.png) no-repeat left;
padding-left: 36px;
}

some success!

There is not enough space for the full image…How do i adjust the space?

Can I hide “about” “submit” and “contact” text?

Also, the image I acutally want to use is larger than 32x 32 (I was just using heartbig.png as a test). Is it possible to have a bigger image?

Basically I want my links to look like this site: https://www.behindballet.com/ “merry widow” “ballet vs fashion” – large circle with text centred in the middle

thanks so much for your help!!!! I really appreciate it!

yes, of course.

i have an interesting idea for you.
remove

#menu-item-103 a ,
#menu-item-104 a ,
#menu-item-105 a {
background: url(images/heartbig.png) no-repeat left;
padding-left: 36px;
}

and add

#menu-sidebarmenu a {
display: block;
height: 78px;
padding-top: 50px;
width: 128px;
margin: 1px auto;
text-align: center;
font-style: italic;
color: #FFFF00;
background: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/package_favourite.png") no-repeat top;
}

cheers.
??

you can replace the image with yours. https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128×128/apps/package_favourite.png
dimension: 128x128px

OH wow!! You are AMAZING. Thank you!

Want to help me with some other blog problems??!! I have quite a few!

you are welcome.
??

please mark your topic as “Resolved”. Thanks

https://codex.www.ads-software.com/Forum_Welcome