Header Logo link

[jeff9661]

For some reason the width of the href does not cover the width of the logo in the title area. I'm working with the Executive theme.

http://smithdon.wwwssr1.supercp.com/

<div id="title-area">

<h1 id="title">

<a title="Smith Donovan" href="http://smithdon.wwwssr1.supercp.com/">Smith Donovan</a>

</h1>

</div>

In the CSS code below I've tried increasing the image header partial width "#title a" from 25% to 26% or higher but the menu drops down a line. Reducing the "widget-area" width from 75% to 50% helps but not enough. Using a width of 245px instead of 25% on "#title a" works, but then the menu drops down a line on other my iPad.

Anyone have any thoughts? I suppose there is a solution editing the @ media sections along with the main CSS I'm working with below, however I'm surprised I even have to deal with this.

/* Header
------------------------------------------------------------ */

#header {
margin: 0 auto;
min-height: 100px;
width: 100%;
}

#title-area {
float: left;
overflow: hidden;
width: 25%;
}

#title {
font-family: 'Open Sans', sans-serif;
font-size: 36px;
font-weight: bold;
line-height: 1.25;
margin: 0 0 5px;
}

#title a,
#title a:hover {
color: #222;
display: block;
padding: 27px 0 0;
text-decoration: none;
}

#header .widget-area {
float: right;
width: 75%;
}

/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 100px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 25%;
}

/* Image Header - Full Width
------------------------------------------------------------ */

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
width: 100%;
}

[Megan Gray]

Try something like this:

 

 
/* Header
------------------------------------------------------------ */

#header {
margin: 0 auto;
min-height: 100px;
width: 100%;
}

#title-area {
float: left;
overflow: hidden;
width: 45%;
}

#title {
font-family: 'Open Sans', sans-serif;
font-size: 36px;
font-weight: bold;
line-height: 1.25;
margin: 0 0 5px;
}

#title a,
#title a:hover {
color: #222;
display: block;
padding: 27px 0 0;
text-decoration: none;
}

#header .widget-area {
float: right;
width: 55%;
}

/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 100px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 45%;
}
/*** Pete CSS ***/
.header-image #title {
width: 470px;
}
.header-image #title a {
width: 470px;
}

[bigredseo]

Megan,
I'd been racking my brains on this one also, and thanks to your fix, I now have 3 websites with the logos linking up correctly.

Thanks for the contribution!  Hopefully this fix will be included in a future release of the Executive Theme!

Conor Treacy

[caconroy1]

Thanks Megan!  That worked great.  What's the timeline for getting this added to the theme?

[Author]

Posts