Adjusting Header Height (thickness)

Community Forums Forums Design Tips and Tricks Adjusting Header Height (thickness)

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Davinder Singh Kainth 10 months, 3 weeks ago.

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

    eevdo
    Member
    Post count: 22

    Hi guys,

    I am currently running Genesis framework and I wanted to know how I can adjust my site’s header height or thickness. What I am essentially trying to do is reduce the height of this header from 164px to something like 80px.

    Thank you,
    Eric

    http://bit.ly/1aTG5EY
    #78284

    Davinder Singh Kainth
    Participant
    Post count: 1298

    Two changes you need to make to adjust height.

    1. Look for following code and change min-height value as per requirement.

    /* Logo, hide text */

    .header-image .site-header .wrap {
    background: url(images/logo.png) no-repeat left;
    padding: 0;
    }

    .header-image .site-title a {
    float: left;
    min-height: 164px;
    width: 100%;
    }

    2. Look for following code and change 40px value for padding to 5px, 10px or 0px as per requirement.

    Site Header
    —————————————————————————————————- */

    .site-header {
    background-color: #fff;
    }

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


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #78318

    eevdo
    Member
    Post count: 22

    Hi Davinder,

    Thank you for your response. It doesn’t seem that this worked.

    Eric

    #78488

    Davinder Singh Kainth
    Participant
    Post count: 1298

    Header height is now reduced on the mentioned website. If still issue, update this post – here to help :)


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #78499

    eevdo
    Member
    Post count: 22

    Davinder,

    I was able to fix it using another method:

    Just added this to style.css trying to get it to work on mobile now as well. Check it out on this test site: http://bit.ly/18VG5dq

    .title-area { height: 30px }
    .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000 }
    body { margin-top: 60px; }
    .header-image .site-header .widget-area, .site-header .wrap { padding: 0!important }
    .site-title { line-height: 60px }
    .site-header { background: #000; color: #fff }
    .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #fff }
    .header-image .site-title a { min-height: auto }

    #78501

    Davinder Singh Kainth
    Participant
    Post count: 1298

    Looks good now.


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

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

You must be logged in to reply to this topic.