Images as menu items

[jw]

Hello,

I would like to replace my menu items with custom images. Is this possible? I feel like I saw the feature somewhere some time...

Best
Julius

[mariusjopen]

Dear @jw
this is not possible easily. You need to come up with a creative solution for this. CSS…
Best!

Marius

[jw]

Dear Marius,

I tried a bit of CSS butt have been struggling since I don't have too much knowledge in this field. From what I've gathered online, this could be the CSS to replace the Menu item:

text-indent: -100em;
overflow: hidden;
background: url(http://spandau20.com/wp-content/uploads/2020/05/mixtapes.png) no-repeat;

How can I address the menu item in my code? Using [data-id="161"] {...} was unsuccessful :(

spandau20.com is the website.

Cheers!
Julius

[mariusjopen]

Dear @jw
Can you post a link to your website?
We will then have a look and inspect that!
Many wishes!
Marius

[jw]

Hi Marius,

it is spandau20.com

Thank you!

[mariusjopen]

Dear @jw
play around with this:

nav.primary li {
    display: inline-block;
    background: url(http://spandau20.com/wp-content/uploads/2020/05/mixtapes.png) no-repeat;
    background-size: contain;
}

Best!
Marius

[jw]

Hey Marius,

this kind of worked. Now all of the menu points have the text overlaid. So now two questions arise:

1. How can I make the original text disappear?

2. How can I select only a single menu point? I tried with selecting via

[data-id="161"]{
...
}

and modifying yours to

nav.primary li menu-item-233 {
    display: inline-block;
    background: url(http://spandau20.com/wp-content/uploads/2020/05/mixtapes.png) no-repeat;
    background-size: contain;
}

but that was not successful.

Best,
Julius

[mariusjopen]

Dear @jw
you cannot use data attributes to assign CSS.
I would recommend to have a look into some tutorials at Codeacademy https://www.codecademy.com/.
It is for free for the basics. The effect you are trying to achieve requires some knowledge and brainpower :-)
Best!
Marius