Responsive Header-Executive Theme

Community Forums Forums Design Tips and Tricks Responsive Header-Executive Theme

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  dev 11 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #40604

    Florissa
    Participant
    Post count: 7

    I have increased the height of the header image to 225 pixels on the executive theme. It is originally 100 pixels.  This displays fine on the desktop version of the site.  Now on the mobile version, the header is cut off.  I have attached a picture as the site is not live yet.  Below is the original CSS:

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

     

    I made the following changes:

    .header-image #title-area, .header-image #title, .header-image #title a {
    display: block;
    float: left;
    height: 225px;
    }

    #header {
    margin: 0 auto;
    min-height: 225px;
    }

     

    I tried the following to make it responsive, but this did not work: 

    .header-image #title a {
    width: 100%;
    background-size: 100% auto !important;
    }

    Any help anyone could provide would be greatly appreciated.  Thanks!

    Here is the link to an image: http://entrepreneurs.techiepros.com/wp-content/uploads/2013/05/MG-SCREENSHOT.png

    http://entrepreneurs.techiepros.com/wp-content/uploads/2013/05/MG-SCREENSHOT.png
    #40632

    dev
    Participant
    Post count: 408

    Try the Genesis Responsive Header plugin. It works on many themes.

    http://designsbynickthegeek.com/plugins/genesis-responsive-header-updated

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

You must be logged in to reply to this topic.