SVG not interactive in theme header

  • Resolved JBMcM

    (@jbmcm)


    5 years, 10 months ago

    Hi, thanks for the great plugin. It works like a dream – except in my header image, which is the only place we need interactivity. I am developing a new site for our church and they want the telephone number and email to be clickable.

    The image works fine when it is embedded into a page and also when it is used as one of the main slider images. But it doesn’t work when in the header. When i view the page source i can see the class=”style-svg” HAS been added in the for the image but it is missing in the link for the header. Same image. Any ideas?

    I did follow a link to a similar problem on this forum but it is 4 years old and WP now allows for cropping of images. Anyway I don’t want to crop the image, just use as is.
    I don’t have a live url yet as the site is in development. Could post page code if necessary.

    Thanks
    JOhn

Viewing 1 replies (of 1 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    5 years, 10 months ago

    Hi there,

    I don’t think using an SVG to do that is wise… Unless I’m missing something by not seeing the design. But for clickable links like that, you should really use proper markup for it in my humble opinion.

    However, if you want to use internal elements of your SVG, you will need to make sure it renders inline. In your case, I’d almost just put the SVG code in the header.php file itself rather than using my plugin to achieve that.

    It’s hard to give any more advice without seeing the site. Local (by flywheel) allows you to share a public link if you like while working locally and it’s a super easy system for local WP sites.

    As for cropping, that won’t work on SVG files, that screen gets skipped for SVG.

    So yeah, I would use normal links as first preference, then embed the SVG in your header.php as second preference. It’s likely that my plugin loads later than your theme header, so it can’t go through and switch out the IMG tag with the inline SVG.

    I hope this helps. Let me know how you go, or feel free to share a link to the site if you get it on Local or something else.

Viewing 1 replies (of 1 total)

The topic ‘SVG not interactive in theme header’ is closed to new replies.