Change header height

[cindori]

I want to change the height of the normal header (I think it’s 99px, to 89px) and the floating header (79px to 69px). Anyway so just -10px for both normal and floating header. What is the best way to go about doing this?

So far I’ve added in custom CSS:

.full-center #header, .full-center .float-menu {
    height:89px !important;
}

.full-center #main-navigation ul.menu > li > a, .full-center .header-right ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center .header-right div.text, .full-center #header .aux-item ul.social-icons li {
    height:89px !important;
    line-height:89px !important;
}
.browser-ff #logo a {
    height:89px !important;
}

This brings me fairly close to the desired result, however it does not fix the floating header height, and my logo is not adjusting properly when the floating menu activates. See http://www.cindori.org.
How can this be achieved in the best way, and is there anything missing from my code above/will it break stuff?

PS. Super satisfied with the theme overall and it’s vast customisation features. Best quality WP themes out there.

[Mohammad – SUPPORT]

Hi,
I have tested and found each things perfectly. Header and logo looks perfect after scrolling the page. Thanks for liking the theme.
Thanks
Mohammad

[cindori]

Hi Mohammad
Well, no it is not working fully.

1. The floating menu is not smaller than the static menu, they are the same size. I want to decrease the height of the floating menu. What CSS property will achieve this?
2. The logo is not adjusting properly (vertically centered) when scrolling and activating the floating menu:

View post on imgur.com

[Mohammad – SUPPORT]

Hi,
Logo alignment perfect as i checked many times. Please go through Admin -> Theme Options -> Header Options -> Sticky header resizing [ Enable the sticky header to resize when scrolling down the page].
Thanks
Mohammad

[cindori]

I got it working. For reference, the CSS needed to change header height was:

.full-center #header, .full-center .float-menu {
    height:89px !important;
}

.full-center #main-navigation ul.menu > li > a, .full-center .header-right ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center .header-right div.text, .full-center #header .aux-item ul.social-icons li {
    height:89px !important;
    line-height:89px !important;
}

.full-center.resized-header #main-navigation ul.menu > li > a, .full-center.resized-header .header-right ul.menu > li > a, .full-center.resized-header nav.float-alt-menu ul.menu > li > a, .full-center.resized-header .header-right div.text, .full-center.resized-header #header .aux-item ul.social-icons li {
	height:59px !important;
	line-height:59px !important;
}

.full-center.resized-header #header, .full-center.resized-header .float-menu {
	height:59px !important;
}

Where 89px and 59px is the new height for static and floating header.

[Kyle – SUPPORT]

Ok great 🙂

[Ben]

Thanks Cindori, I was just looking for this exact thing and you saved me a bunch of time!

[Kyle – SUPPORT]

Great 🙂