Header Logo link

Community Forums Forums Design Tips and Tricks Header Logo link

This topic is: not resolved

This topic contains 3 replies, has 4 voices, and was last updated by  caconroy1 1 year, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #32629

    jeff9661
    Participant
    Post count: 9

    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%;
    }

    #33310

    Megan Gray
    Participant
    Post count: 23

    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;
    }

    #40197

    bigredseo
    Participant
    Post count: 2

    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

    #42549

    caconroy1
    Participant
    Post count: 1

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.