Tagged: , ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #381127
    #381441

    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 3 years, 5 months ago by  Yigit.
    #684126

    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?

    #684127

    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?

    #684659

    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

    #738296

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

    #738301

    Hey!

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

    Best regards,
    Yigit

    #808973

    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…

    #809251

    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

    #809499

    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 3 years ago by  getfred.
    #809523

    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.

    #809526

    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 3 years ago by  Guenni007.
    #809613

    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 3 years ago by  getfred.
    #809669

    :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

    #1105267

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

    #1220596

    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

    #1221196

    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

    #1221334

    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

    #1223024

    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

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

The topic ‘Use SVG as the logo…’ is closed to new replies.