Tagged: ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • January 16, 2015 at 10:56 pm #381127
    January 18, 2015 at 12:02 pm #381441
    Ismael

    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;
}

    Cheers!
    Ismael

    • This reply was modified 7 years, 9 months ago by Yigit.
    September 9, 2016 at 11:54 am #684126
    thrivees

    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?

    September 9, 2016 at 11:54 am #684127
    thrivees

    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?

    September 11, 2016 at 6:49 am #684659
    Rikard

    Hi,

    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,
    Rikard

    January 25, 2017 at 12:23 pm #738296
    Daniel

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

    January 25, 2017 at 12:54 pm #738301
    Yigit

    Hey!


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

    Best regards,
    Yigit

    June 16, 2017 at 3:06 pm #808973
    getfred

    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…

    June 17, 2017 at 10:42 am #809251
    Rikard

    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,
    Rikard

    June 18, 2017 at 9:44 am #809499
    getfred

    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.

    Thankyou/Frederik

    • This reply was modified 7 years, 5 months ago by getfred.
    June 18, 2017 at 1:54 pm #809523
    Guenni007

    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.

    June 18, 2017 at 1:57 pm #809526
    Guenni007

    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 7 years, 5 months ago by Guenni007.
    June 18, 2017 at 11:03 pm #809613
    getfred

    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 7 years, 5 months ago by getfred.
    June 19, 2017 at 7:04 am #809669
    Guenni007

    :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:

    https://webers-testseite.de/ikom

    May 29, 2019 at 8:02 pm #1105267
    1000zen

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

    June 8, 2020 at 7:38 pm #1220596
    webdesignphx

    Can you please help me make the logo shrink so it stays aligned to the left?
    It also shrinks a little to much and then pops back up to a larger size. Here is a video what is happening:
    https://www.webdesign-phoenix.com/wp-content/uploads/2020/06/logosvg.mov

    this is the css that I am using:
    /* logo as a svg mobile different padding */
    .responsive .logo img {
    min-width: 350px;
    padding: 20px 0;
    }
    .responsive .header-scrolled .logo img {padding: 5px 0;}
    img.mfp-img {min-width: 350px;}

    Thanks so much.
    Tina

    June 10, 2020 at 2:03 pm #1221196
    Yigit

    Hi,


    @webdesignphx     Please change following code

    .responsive .header-scrolled .logo img {
    padding: 5px 0;
}

    to following one

    .responsive .header-scrolled .logo img {
    padding: 5px 0;
    min-width: 240px;
}

    Best regards,
    Yigit

    June 10, 2020 at 7:00 pm #1221334
    webdesignphx

    Hi Yigit
    thanks for your help. The site is now live. https://www.phxbookkeeping.com/
    The CSS did not help much. Do you see how tiny it gets when you scroll up? I’d rather just have it get to the size it is when the font turns black.
    Also is it possible to make it shrink so it aligns to the left and not jump to the left?
    Thanks so much
    Tina

    June 16, 2020 at 1:52 pm #1223024
    Ismael

    Hi,


    @webdesignphx    : Looks like you already figured out how to resize the logo properly. If you need more help, please don’t hesitate to create a new thread .

    Thank you for your patience.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Use SVG as the logo…’ is closed to new replies.