Increase the width of header right widget area in Magazine pro theme

Community Forums Forums Design Tips and Tricks Increase the width of header right widget area in Magazine pro theme

This topic is: not resolved

This topic contains 5 replies, has 5 voices, and was last updated by  Kellylise 2 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #104393

    jinsejose
    Member
    Post count: 14

    How can I increase the width of header right widget area in Magazine pro theme and decrease the width of logo on my site.

    http://techbee.in
    #104471

    nutsandbolts
    Moderator
    Post count: 3131

    Did you get this resolved? I’m seeing the title area almost exactly the width of your logo and the header right area wide enough for your banner ad.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #104493

    jinsejose
    Member
    Post count: 14

    No. not resolved. actually I need to insert a 970px width banner there and remove the logo completely. If not, decrease the logo width to 10px or 20px.

    #104501

    braddalton
    Participant
    Post count: 9785

    You need to modify the width value in the Site Header section of your style.css file.

    The width value for the .site-header .widget-area will need to be increased.

    And remove your logo depending on how you added it.

    [css]
    /*
    Site Header
    —————————————————————————————————- */

    .site-header {
    padding-top: 40px;
    padding-top: 4rem;
    }

    /* Title Area
    ——————————————— */

    .title-area {
    float: left;
    padding-top: 30px;
    padding-top: 3rem;
    width: 1140px;
    }

    .header-image .title-area {
    padding: 0;
    }

    .site-title {
    font-family: ‘Raleway’, sans-serif;
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 1;
    margin-bottom: 0;
    }

    .site-title a,
    .site-title a:hover {
    color: #222;
    font-weight: 900;
    }

    .site-description {
    display: block;
    height: 0;
    margin-bottom: 0;
    text-indent: -9999px;
    }

    /* Full width header, no widgets */

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

    .header-image .site-description,
    .header-image .site-title a {
    display: block;
    height: 0;
    margin-bottom: 0;
    text-indent: -9999px;
    }

    /* Logo, hide text */

    .header-image .site-header .wrap {
    padding: 0;
    }

    .header-image .site-title a {
    background-position: center !important;
    background-size: contain !important;
    float: left;
    display: block;
    min-height: 200px;
    text-indent: -9999px;
    width: 100%;
    }

    /* Widget Area
    ——————————————— */

    .site-header .widget-area {
    float: right;
    text-align: right;
    width: 228px;
    }

    .header-image .site-header .title-area,
    .header-image .site-header .widget-area {
    padding: 0px 0;
    padding: 0rem 0;
    }

    .site-header {
    padding-top: 60px;
    }

    .site-header .widget-area p {
    margin-bottom: 0;
    }
    [/css]


    #104601

    teamvape
    Member
    Post count: 10

    @jinsejose

    what did you use to put your logo in the navigation bar? been looking for something slick like that!!!

    #113131

    Kellylise
    Participant
    Post count: 393
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.