Tagged: , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #381127

    Hey debenm!

    Thank you for using Enfold.

    Please post the website url here so that we can take a look at the current layout of the site. A screenshot will help. You can try to add the svg as logo background. Try this on Quick CSS:

    .logo img {
    display: none;
    .logo {
    background: url('http://lifeinconnection.com/calledhigher/files/2015/01/20150116_calledhigher_logo.svg') no-repeat;
    width: 340px;
    height: 125px;


    • This reply was modified 2 years, 10 months ago by  Yigit.

    Hey there, I have used plugin SVG support in order to upload my logo and favicon as SVG, but they are not visible at all.
    What can I do?


    Hey there, I have used plugin SVG support in order to upload my logo and favicon as SVG, but they are not visible at all.
    What can I do?



    Did you try the code Ismael posted? If that doesn’t work for you then please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,


    My 2 cents: the code above works! One thing: the display: none ends with a colon instead of a semicolon.



    @strila I edited Ismael’s code and fixed the typo. Thanks for pointing that out! :)

    Best regards,


    Thank you for the “svg as logo bg” code. Works (almost) perfect. Except on mobile. Here the enfold logo still appears when you remove the logo. So I placed a transparant png instead. That seemed to work, but in my mobile browser (safari, iPhone) the name of my site is previewed in the logo area, on top of my background svg logo. How can I make the sitename dissapear? Thanks in advance…


    Hi @getfred,

    I can’t see the issue you are describing, did you make sure to clear the browser cache and reload the page after you made changes to your site?

    Best regards,


    Hi Rikard,
    I still have the issue after clearing cache. Sitename (url) is written right on top of svg logo.

    I also need to ask; can you provide an addition to this code, so we have the possibility to change the logo for the feature “sticky header/shrinking header”, and still keep it an svg? I have a challenge with logo positioning in sticky/shrinked header.


    • This reply was modified 2 years, 6 months ago by  getfred.

    i see you have inserted the svg in logo field of Enfold Options so only give the img a size in quick css:

    .logo img {
        width: 340px;

    this will be enough on your problem because on shrinking header this solution will work too!

    the 100% will not do the job

    but i can completely recommend that little plugin: SVG-Support
    from the activation of that plugin you can handle svgs like normal images – and with one great advantage – if you like (induces by giving the image a class) the <img src=… is replaced by the svg code instead. This has some great advantages – you can f.e. influence different path in that svg by css – you can make some hover effects etc.


    and by the way the logo on mobile got his own rule in responsive case. – So the display: none does not work here.
    you have to be more selectiv in this case:

    .responsive .logo img { display: none }

    but you don’t need that – see above css rule for your problem – give the logo img a absolute width not a relative.
    btw: why would you like to have the svg as background image?

    • This reply was modified 2 years, 6 months ago by  Guenni007.

    Hi Guenni007,

    Thank you so much, I will try everything out! Definetly the plugin. I thought Ismael’s code was the only workaround for using svg as a header logo. I notice now it’s some 2 years old.

    BR Frederik

    • This reply was modified 2 years, 6 months ago by  getfred.

    :lol – i did not notice that.
    But the site of debenm exists and the issue there is not solved ?
    Nevertheless if you need more help on that feel free to ask furthermore

    And yes – ismaels workaround will do the job, but if you have enabled the mime-type svg for upload – you can insert it the same way you did it with png. The only thing is to give the svg an absolute width or height.

    By the way – you can see here the plugin working with the replacement of img src by the svg itself.
    Hover it and you can see what kind of advantages are with this svg file instead – you can even adress every letter you like :lol:



    Thanks Guenni007 you are a genius. To set the width just did the jog of displaying my svg logo.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.