Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1172278

    I’d recommend a little plugin:
    Besides the advantages of using svg like imgs, it also has the advantage that you can see previews of svg files in the media library.
    Furthermore you could also use the svg you use inline; i.e. if an img src encounters an svg, the img tag is exchanged with the svg. etc. pp

    Using an inline svg file could have a lot of advantages. f.e. you can influence the classes in the svg by css.
    See here – and scroll down. The “Bonn” has in the svg a given class and i set the opacity to zero on header-scrolled.
    Or on hove fill it red etc. :


    Thanks. I’m not sure how I can add a special class to the logos (transparent and not). Can you help with that?


    1) you are concerning to the svg classes inside. These are set in the program you used to generate the svg file.
    Illustrator usually takes st0, st1 etc.
    May i see a link to your svg logo? – or open it yourself in a good text-editor on your Mac/PC ( sublime-text / notepad++)
    Look to the source code of :

    there you got the classes – and of course you can change them here too with a good text-editor. IDs and classes .
    you see the initial styles on top ( fill parameter etc )

    PS : if you are using svg as inline svg – you must think of giving a dimension to it via css on your quick css – otherwise it will not be shown on some browsers ( chrome / safari )

    2) if you mean the trigger class of that plugin to substitute the img by the inline svg – you can manage that via jQuery in functions.php.


    OK thank you for the idea! It didn’t occur to me to add a class within the svg file itself. My problem I don’t think is with the svg file but rather not knowing how to style / target the sticker header and the two different logos. This is the page I’m having trouble with.
    I have the white svg logo showing up when you load the page. Perfect. But when you scroll, I need it to show the black svg file. It’s currently still showing the white one.

    On the inside pages the black logo is showing correctly. However on mobile, it is showing a double logo.
    Any ideas?


    in the moment you got the not fixed header – so the scrolled header isn’t in viewport.

    This mentioned page is a page with transparency. For that case Enfold got that extra input field in Enfold Options:
    Enfold (Child) – Header – Transparency Options : Transparency Logo ( and Transparency Menu Color )
    so insert in the normal logo field your white svg.

    • This reply was modified 3 years, 8 months ago by Guenni007.

    here are you logos a bit styled inside svg:
    If you do it this way described above ( the white one to transparency options input field – the black one to normal logo input field.
    i styled your logo inside – you see some groupings with ids – each of them can be selected separatly now. The underlined “preserve…” is for shrink behavior of the svg – now it shrinks in y-direction to the middle but on x-axis to the left

    This is only possible with that plugin mentioned on top.
    But if you see this page :
    you see what you can do with real inline svg files.

    so with inline svg i can colorize only the Alt/Care on scrolled state etc. pp

    Info : Enfold sets for transparency header state a class to header: av_header_transparency
    on shrinking header the classes comes to header : header-scrolled and header-scrolled-full

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.