Image Primary menu image - items with no image

[Regnalf]

I’ve found this related topic about custom images in menus. So good and works so far.

Image Primary menu icon?

But if i only need images for some menu items and not for everyone some code like this appears

<img alt="Image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0OHB4JyBoZWlnaHQ9JzQ4cHgnIHZpZXdCb3g9JzAgMCA0OCA0OCcgdmVyc2lvbj0nMS4xJz48cmVjdCBmaWxsPSdyZ2JhKDAsIDAsIDAsIDAuMzUpJyB4PScwJyB5PScwJyB3aWR0aD0nNDgnIGhlaWdodD0nNDgnPjwvcmVjdD48L3N2Zz4=" width="24" height="24">

… and it creates a empty box left of the menu text:

and it seems it’s coming from the width and height of “24” from the img tag

[mldarshana]

Hi There @Regnalf

Thanks for writing in! I could not replicate the issue on my end. Upon checking your site URL assigned to this Theme account, it seems that you have enabled maintenance mode.

Could you please provide us a way to access your site along with your site URL, so that we can look into your issue further.

Thanks!

[Regnalf]

The reason why you can’t find this site is because it’s under development under a temporary domain. And the license will be in an other theme.co account.

[jade]

Hi there,

Do you aim to hide the graphic images on mobile and use the texts instead?

If so, please click on the customize option of the Off Canvas navigation then add this to the Element CSS:

$el. x-graphic {
    display: none;
}

Element CSS | Themeco Docs

Hope this helps.

[Regnalf]

Actually i want the other way around, sorry if i didn’t make it clear what i want to achieve:

I have a special menu item with an image what should only appears in mobile menu if screen width is small enough for mobile. Because this menu item is in an other menu bar if the screen is big enough like desktop. But that was not the problem, this part works so far.

The problem is, as you already can see in the first message, that i have this empty image placeholder for all other menu items they don’t have an image set in the menu. And in the header options, i can only set the “use image” option for all menu items in the bar.

I’ve found a solution with this css selctor:

.menu-item .x-graphic-image img[src^="data"] {display: none !important;}

Because every menu item with no image set starts with this src=“data:image/…”
I don’t know if this ready for future updates, but i hope you can enlighten me if i can use it?

[ruenel]

Hey There,

data:image/svg+xml.... is a placeholder for image and you have made correct decision in using the css .menu-item .x-graphic-image img[src^="data"] {display: none !important;}. This will always work even in the future updates so long as the placeholder does not change.

Hope this helps.