Tagged: , , ,

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

    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;


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

    But no luck. Any thoughts


    Hey Richard,

    There are a few different methods:

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

    Best regards,
    Jordan Shannon


    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


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

    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,


    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');
    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


    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.



    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;
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.