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 1 year, 11 months ago.

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


    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,

    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;



    Hi Davinder,

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



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




    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:

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


    Looks good now.

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

You must be logged in to reply to this topic.