Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Different logo SVG on mobile

Julia Braga May 10, 2017 10:09AM CEST

Hi! I'm working on a client's portfolio, and I'd like the logo to be a different SVG on mobile: instead of the full wordmark SVG (which works fine), I would have a different SVG displaying instead with the symbol from the brand instead.

How do I do this, custom CSS? And if yes, examples?

Thank you for the great framework!

Up 0 rated Down
Amanda May 10, 2017 06:21PM CEST Semplicelabs Agent

Hi Julia,

Do you edit the SVG logo with CSS at all?

I ask because the easiest solution would be upload the SVG as an image instead of code, then use jQuery/JavaScript to swap out the logo at mobile size. However, you won’t be able to manipulate the contents of the SVG with CSS if that is the solution you go with.


Up 0 rated Down
Julia Braga May 11, 2017 05:05AM CEST
Hi, Amanda!

I could definitely use it as an image, I have SVG support installed for WP. What would that JS look like?

Thank you so much!
Up 0 rated Down
Amanda May 11, 2017 04:57PM CEST Semplicelabs Agent

Hey Julia,

Are you able to share a link to the page with me as well as the other image URL you’d like to use? I’d like to test before I hand off the code incase there’s issues. :)


Up 0 rated Down
Julia Braga May 12, 2017 04:11AM CEST
The website is on Development mode, she has a high traffic on it and I am not able to open it without confusing the audience.

Does it work if I create you a user there so you can check it out for me?

Also, I am having issues with translation. I need the page fully in Portuguese, but some elements are still in English :D
Up 0 rated Down
Amanda May 12, 2017 05:38PM CEST Semplicelabs Agent

Hi Julia,

A temporary login would work. You can email and include a link to this thread as a reference.

Translation is outside Semplice’s functionality, so we aren’t able to help with that.


Post Your Public Answer

Your name (required)
Your email address (required)
Answer (required)
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found