Make header clickable (link to home) [Yoko]

auntyclare · Member · Oct 20, 2015 at 12:08 pm
Copy link

Add topic to favorites
I’ve made a header image that matches our branding and includes site title and tagline. (This post explains why I need it.)

Using it as a logo is too small. But as a header image, it isn’t clickable. I’m sure people will expect to be able to click it to navigate to the home page. It’s more fiddly to click on “home” in the menu, especially on mobiles.

Is it possible to make the header image clickable and link to home?

Thanks.

(auntyclare.wordpress.com is my free test site, so I know I won’t be able to make the changes stick. But at least I can try it out there. For the time being, I’ve also made the logo visible in case that helps in identifying what CSS is needed.)

The blog I need help with is: (visible only to logged in users)
g471n · Member · Oct 20, 2015 at 3:09 pm
Copy link
Hi auntyclare

You could use the logo as a header image with the following custom CSS. I would recommend cropping the large whitespace off the right side of the image.
```
#site-title .site-logo {
    height: auto;
    width: 654px;
}
```
To add custom CSS

Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

You need to be on the WordPress.com Premium Plan for custom CSS to save. As you know, custom CSS can only be previewed on the free plan.
auntyclare · Member · Oct 20, 2015 at 3:36 pm
Copy link
Thanks for the suggestion.

I cropped a banner image and tried it but the logo didn’t go right across the screen the way a banner would. it doesn’t necessarily need to go across the whole screen, but it I think looks odd how it is. I tried changing the 654px to 1000px but it didn’t make a difference. So I’m guessing it may be because it was meeting the menu. Similar to the problem I was coming across in the post I’ve linked to above.

More to the point, it doesn’t work on mobile screen. The logo doesn’t resize small enough.

No items found.