Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 12, 2020 at 3:17 pm #1222109
    raslade

    Hi there

    I’m trying to add a hover to the SVG logo in the header using just CSS and tried 

    .logo img:hover {
  fill: red;
}

    and

    .logo a:hover img {
    fill: red !important;
}

    But no luck. Any thoughts
    Richard

    June 13, 2020 at 6:22 am #1222285
    Jordan Shannon

    Hey Richard,

    There are a few different methods:

    Change Color of SVG on Hover

    Please provide a link to the site page in question so we can look into this further.

    Best regards,
    Jordan Shannon

    June 13, 2020 at 9:31 pm #1222403
    raslade

    Thanks and very useful. I’ve fixed using a filter:

    invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);.

    and getting the exact colour match values via this useful tool, if anyone else needs the solution: https://codepen.io/sosuke/pen/Pjoqqp

    Richard

    • This reply was modified 4 years, 5 months ago by raslade.
    June 14, 2020 at 1:15 pm #1222467
    Rikard

    Hi Richard,

    Great, I’m glad that you found a solution and thanks for sharing. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    June 14, 2020 at 9:58 pm #1222522
    Guenni007

    or – you replace the img src svg with the inline svg.
    and then you can go and style the fill colors:

    function replace_logo_with_svg() {
?>
  <script type="text/javascript">
  (function($) {
    function a() {
      $( ".logo a img" ).remove();
      $.get('/wp-content/uploads/YOUR-LOGO.svg', function(svg){
        $( ".logo a" ).html( svg );
      }, 'text');
    }
    a();
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'replace_logo_with_svg');

    after you have the inline svg file – you had to change some display options for logo
    set it to display flex

    June 15, 2020 at 9:33 am #1222570
    raslade

    That’s very useful to know another way to fix. Trying to get the colours right using the filter was a bit hit and miss.

    Thanks for the other solution.

    Richard

    June 15, 2020 at 2:15 pm #1222650
    Guenni007

    you can see here in action: https://webers-testseite.de/pureinstall/
    this is only one svg.
    The letters are filled with different color on scroll down or if not transparency header.
    The class in that svg for the letters is web9:

    #header.header-scrolled #letters .web9,
#header:not(.av_header_transparency) #letters .web9  {
    fill: #112b3f;
}
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.