WH

Whole Header Region Clickable

Header Text and Image are Clickable

On the majority the sites out there, the click of the upper-left hand side where logo and text is situated, will take you to the home page. Take for example Trello or PcWorld. However, I do not have a small logo on the upper-left of the site because I want my whole header region to lead to the home page.

The general idea on how to do this is to make a header tag that will contain all header text and logo along with a link. To illustrate this, I will use my site as an example. If you want to make changes in your Octopress blog, I am modifying my source/_includes/custom/header.html file.

<!-- Header Region -->

<div title="Home is where the heart is." id="main-header-container">
  <div id="top-header-area"></div>
  <div id="main-header">
    <img
      alt="my-main-logo"
      id="my-main-logo"
      src="{{ root_url }}/images/logoSmall.png"
    />
    <h1 id="site-title-header">{{ site.title }}</h1>
  </div>
  <a id="home-link" href="/"></a>
</div>

To make the link work for all browsers, which includes IE, there is an additional css trick. The A tag needs to have a background color (it does not matter which color) and set the opacity of the A tag to zero.

/* Absolute Position the A Tag */

#home-link {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}