Responsive Logo | replace img when viewport is below 768px

[mark5]

Hi,

I need to replace our logo image from x.svg to y.svg when the viewport drops below 768px. How can I do this in Pro? Also, both are .SVG files.

X:

Y:

[mircotripoczky]

That’s pretty easy and works everywhere (with all elements, row, columns, sections, etc.) not just at the header builder.

Place both images and set the “Hide During Breakpoints” individually for each image. That way one image is “switched” with the other.

[mark5]

Will this work with an .SVG file?

[mark5]

Figured it out. I added a DIV and inserted the .SVG content into the new DIV. Next up, making the SVG clickable.

[mircotripoczky]

For .svg to be accepted by Wordpress you’ll need a plugin in case you want to use it as an image. If you just copy/paste the svg-code I suggest a “RAW Content” element, but this one doesn’t have the “Hide During Breackpoints” option… so you’ll need to place the “Raw Content” inside a DIV element. And the DIV you can make clickable:

best regards
Mirco

[ruenel]

Hi @mark5,

Thanks for writing in! We really appreciate for letting us know that you have resolved the issue already.

@mircotripoczky:
Thanks for chiming in!

Cheers.