Archived topic

Alternate mobil menu with svg or png file

3 replies · Started by Horst on March 13, 2020

Viewing posts 1–4 of 4

March 13, 2020 at 8:19 am #1193964

Hi there,

I would like to exchange the currently used icon for an SVG, alternatively PNG icon in the mobile menu. Can this be done with CSS, but should it work with a PNG file? Unfortunately, I can't reach my goal.
Thanks in advance.
Regards, Horst

.slideout-toggle:not(.has-svg-icon) a:before {
content: "\f228"!important; color: #444!important;
font-family: "Dashicons"!important;
position: relative;
box-sizing: content-box;
width: 35px;
height: 35px;
overflow: hidden;
white-space: nowrap;
font-size: 35px;
line-height: 1;
cursor: pointer;
top:12px!important;
}

March 13, 2020 at 7:09 pm #1194296

Hi there,

You should be able to use a PNG like this:

.slideout-toggle:not(.has-svg-icon) a:before {
    content: url( 'URL TO PNG HERE' );
}

Let me know :)

March 14, 2020 at 3:14 am #1194448

Thank you very much, Tom. It worked just fine. I had tried this solution myself. It did not work, probably because the cache could not be emptied properly. New version of WP Rocket (with CDN). :-)

Thanks and regards, Horst

P.S .:! Important was necessary

March 14, 2020 at 8:10 am #1194788

Glad I could help! :)

This archived topic is closed to new replies.

Start building better websites today.