Adjusting Header Height (thickness)

[eevdo]

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

[Davinder Singh Kainth]

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

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[eevdo]

Hi Davinder,

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

Eric

[Davinder Singh Kainth]

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

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[eevdo]

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 }

[Davinder Singh Kainth]

Looks good now.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Author]

Posts