Clickable header image to return to home screen

  • Resolved aarontimo

    (@aarontimo)


    10 years, 1 month ago

    Hi there,

    I’m trying to make our website’s header image clickable (returning to the home screen).

    I’ve checked previous support posts and added this

    .site-title a {
    color: transparent;
    display: block;
    background: url('https://bawp.org.au/wp-content/uploads/2013/10/cropped-BAWP-logo-with-justice1.jpg') 0 0 no-repeat;
    width: 1020px;
    height: 263px;
    text-indent: -9999px;
}

    to the child theme for Expound. However, this does not work (the image is there, but it’s not clickable). If I remove the header image, under ‘Appearance>Header’ then the image is removed entirely.

    I can get the header image to appear, and to be clickable, if I check ‘Show header text with your image’ under ‘Appearance>Header’ but then the logo appears out of alignment (see https://note.io/1yXVzK2), even if I remove the site title and tag line.

    Any help would be much appreciated.

    Many thanks

    Aaron

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter aarontimo

    (@aarontimo)

    Can anyone please assist?

    Well, you could either change the HTML in header.php (in a child theme), or you could use some javascript (which you could add in a widget, if each page has one);

    headerImage=document.getElementsByClassName("site-branding")[0];
headerImage.addEventListener("click",function(){document.location="https://your.url/";},false);

    frank

    Thread Starter aarontimo

    (@aarontimo)

    Hi Frank,

    Thanks for your reply!

    I assume the code you provided is for the javascript option? If so, could this code go in any widget that we have down the side of our site?

    Many thanks!

    Aaron

    That indeed is for the JS-based solution. If you paste this in a text-widget (and if that text-widget is on every page), this should work.

    frank

    Thread Starter aarontimo

    (@aarontimo)

    Thanks Frank. The only widget I can add code to is the ‘text’ widget, and then the code appears down the side of the site (and the header still isn’t clickable). Should I put ‘<>’ around the code so the site detects it as code?

    Many thanks

    Aaron

    Hi Aaron;
    You should put the code between script-tags, like this;

    <script>
headerImage=document.getElementsByClassName("site-branding")[0];
headerImage.addEventListener("click",function(){document.location="https://your.url/";},false);
</script>

    have a nice weekend,
    frank

    Thread Starter aarontimo

    (@aarontimo)

    Thank you so incredibly much Frank – that worked!!

    I really appreciate your help.

    Aaron

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Clickable header image to return to home screen’ is closed to new replies.