Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header Logo link
- This topic has 3 replies, 4 voices, and was last updated 10 years, 10 months ago by caconroy1.
-
AuthorPosts
-
April 2, 2013 at 7:49 am #32629jeff9661Participant
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%;
}April 5, 2013 at 10:00 am #33310Megan GrayMemberTry 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;
}May 9, 2013 at 6:10 pm #40197bigredseoMemberMegan,
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
May 24, 2013 at 8:45 pm #42549caconroy1MemberThanks Megan! That worked great. What's the timeline for getting this added to the theme?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.