Replace WordPress Menu Items With Images


I've created images of buttons that I want to use for my navigation bar. To do this I need to replace each menu item title with an image.

I've tried countless tutorials & been on live chat & I still cant get it working.

This is what we tried on the live chat.

Adding a class name to the menu item.

Then using this in my Divi theme custom CSS

.about-button a {?padding: 10px 30px;?background-image: url(https://miniplanet.w…2019/01/about-button-web-1.png);?background-size: cover;?background-position: center center;?background-repeat: no-repeat;?}

According to the guy, this worked in browser inspect element but once I pasted it into my custom CSS nothing would happen.

He recommended a plugin which works (kind of). But it hasn't been updated in a long time, and I'd rather have as little plugins as possible installed on my site so hoping this can be achieved without.

Ideally, I also need this to be responsive for different screen sizes.

If anyones got any suggestions I'd be eternally grateful as Its driving me a little crazy at the minute!

Thank you!