Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #951046

    Hi, I’m using the SVG Support Plugin and I have the width and height set correctly, in fact, it’s set slightly larger. Also, I have the Navigation bar settings set larger as well, yet when I look at the logo in the nav bar it shows for a second then disappears. It eventually shows up if adjust the browser size to about a smartphone.

    Any ideas as to why this is happening? I’ve included my login credential due to this site is under development


    Ok, I had the advanced settings on, so I turned these off and now it works.

    All good now


    A link only to see what happend is nice.
    If your svg has no implementation of widht and height – the wordpress will interpret it as 0x0 px image.
    If you define a width for it :
    .logo img { width: 350px } it will be shown.
    or did you use the replacement option with svg Support – means is it a real svg in your html code?


    As mentioned I’ve resolved the issue, thanks for the reply


    Well these advanced settings might be nice to have.
    See here and look what happens to the svg on shrinking – or on making the screenwidth smaller !

    You can handle path of the svg on hovering f.e to color them different etc.


    What settings did you use?


    Aha .
    on advanced settings you can set automatically set class – but i prefer to have: css class to target
    i use a bit meaningful like: change-to-svg

    to have this class added to the enfold logo – i put this to functions.php of my child-theme:

    function add_class_to_logo_img(){
      (function( $ ) {
          $(function() {
    		$('.logo img').addClass('change-to-svg');
    add_action('wp_head', 'add_class_to_logo_img');

    to force the svg to shrink with the header – this comes to quick css:

    .logo,  .logo a {  display: inline-flex}
    .logo svg { width: 450px;
     transition: all 1s ease-in-out;

    transition all is for the effects i set in quick css

    • This reply was modified 5 years, 4 months ago by Guenni007.

    for example : the BONN is a path on that svg and that path has class st3:
    so on shrinking the opacity is changed from 1 to 0 in one second

    .st3 {
        transition: all 1s ease-in-out;
        opacity: 1
    .header-scrolled .st3 {
        transition: all 1s ease-in-out;
        opacity: 0


    Ok looks cool, I’ll give that a try. Hopefully, I don’t mess this up LOL

    Keep this post open until I confirm ;)


    but you must know your path in your svg file.
    you can open them with a good text-editor like notepad ++ on pc or sublime-text on mac os


    Ok will do



    Thank you!

    Best regards,

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘SVG Logo’ is closed to new replies.