Header Image as Home button

  • Author
  • #2922446


    I am looking to make my header image work as a home button. Can someone help me out with this?

    The blog I need help with is the8oclockstop.com.


    Hi there, this is a bit difficult to accomplish completely with only CSS, but add the following to your custom CSS and it will at least give you a horizontal band of clickable area through the center of the image.

    I have filed a bug report on this and hopefully it will be updated soon and the header will be clickable when the site title and tagline are hidden via Customize > Site Identity.


    @grood105, after chatting with the developers, they are not going to make this change to Baskerville 2, but we do have some options. What the developer suggested would be to create a transparent png image, with no content in it at all, and insert that as a site logo at Customize > Site Identity. We can then use CSS to stretch that transparent PNG logo over the entire header area, making it clickable.

    I would also suggest adding the following at the bottom of your custom CSS, which adds a bit more padding to the header area on screens 1200px and wider, keeping your header image from getting cut off on wider browser windows, at least out to about 1750px in window width. Few will have their browser windows set that wide typically.

    @media screen and (min-width: 1200px) {
    	.header {
    		padding: 90px 0;


    @grood105, upon further discussion, the header image will be made clickable when the site title/tagline is hidden and no logo is present, but this change may not happen right away, so the solution I offer above would be the best direction to head for you. Let me know your thoughts, and when you have the transparent logo done and added to your site and I will get the code worked out.

The topic ‘Header Image as Home button’ is closed to new replies.