Clickable header image to return to home screen

Resolved aarontimo
(@aarontimo)

9 years, 6 months 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('http://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 http://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)

9 years, 6 months ago

Can anyone please assist?
Frank Goossens
(@futtta)

9 years, 6 months ago
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="http://your.url/";},false);
```
frank
Thread Starter aarontimo
(@aarontimo)

9 years, 6 months ago

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

Frank Goossens
(@futtta)

9 years, 6 months ago

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)

9 years, 5 months ago

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
Frank Goossens
(@futtta)

9 years, 5 months ago
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="http://your.url/";},false);
</script>
```
have a nice weekend,
frank
Thread Starter aarontimo
(@aarontimo)

9 years, 5 months ago

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.

Tags