Cant get the site title/header to sit on top of the rest of the content on the page

Question

I am trying to figure out how to make the site title (logo) in the navigation sit on top of everything and hang below the navigation bar - so half of the logo would be in the navigation bar and the other half would hang below. I tried using z-index in a couple spots but it didnt do anything. There is also a shrink feature that I have to get past too. When you scroll down, the navigation bar shrinks and I want the logo to still hang below the nav bar.

Here is the link: http://www.mrsteamers.com/

.header-image .site-title > a {
float: left;
min-height: 80px;
width: 100%;
}
.site-header {
background-color: #13afdf;
position: fixed;
width: 100%;
height: auto;
z-index: 999;
}

.site-header .wrap {
min-height: 160px;
}

.bumper {
min-height: 160px;

}

.site-header .wrap {
padding: 40px;
max-width: 100%;
}

.site-header.shrink .wrap {
background-color: rgba(255, 255, 255, 0.1);
min-height: 60px;
padding: 0 40px;
}

.shrink .site-title {
font-size: 36px;
padding-top: 10px;
}

.header-image .shrink .site-title {
padding: 0;
}

.header-image .shrink .site-title > a {
min-height: 60px;
}

.shrink .site-title a {
z-index: 99;
}

.site-header.shrink .widget-area {
padding-top: 0;
}

Sorry for all the code but I dont know where it fits in to fix it.

Answer 1

Use absolute positioning on the logo container to position it where ever you want it to be. Change the top, bottom, left, right parameter to set the offset of the logo container with respect to its parent container.

Try making the below changes and see how absolute positing helps to position the element.

.site-header .wrap{
  position:relative;
}

.site-header .title-area{
  position:absolute;
  bottom:-35px;
}
//Remove the below styling
.header-image .shrink .site-title > a {
min-height: 60px;
}