Unable to reduce the height of the header

[Mj]

I have been looking for a solution, without success. I found these topics:

https://archived.seventhqueen.com/forums/topic/header-height
https://archived.seventhqueen.com/forums/topic/kleo-setting-header-height-defining-navigation-font-size
https://archived.seventhqueen.com/forums/topic/header-size-add-menu

But I couldn’t find a way to reduce the size of the main header from line-height 88 to 44.

Any suggestions?

[Mj]

COPY CODE

.kleo-main-header .navbar, .kleo-main-header .navbar-collapse ul {
    line-height: normal;
}

does not work.

[Catalin]

Hello,

Add this in your style.css file from your chilf theme:

COPY CODE

.top-banner

{
padding:0 !important;
height: xxpx !important;
}

where xxpx is the new size you want to add.

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Mj]

This code is related to the extra container I added to my template. But I do like to reduce the height of the header, not the container below the header. The one with 88px height.

[Mj]

Probably it’s more easier to check out the result on the ‘explore’ page: http://beatjudge.com/music/explore/

(password: beatcoin)

The header is too high.

[Catalin]

please send me admin credentials to your website… reply as private for security reasons. 10x

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Mj]

Sure thing:

Username: catalin
Password: catalin123

[Mj]

Oops, could you make it private please??

[Mj]

New password: Cata123!!

[Mj]

BUMP

[Abe]

Hello, to reduce it try with:

COPY CODE

.kleo-main-header:not(.header-scrolled) .navbar-header, .kleo-main-header:not(.header-scrolled) .navbar-collapse > ul > li > a {
    line-height: 44px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Mj]

It is almost perfect, please check this video: http://youtu.be/oR2HLxjY5ns
There is a small transition left between the sticky and un-sticky main menu.

[Abe]

Then try:

COPY CODE

.kleo-main-header .navbar-header, .kleo-main-header .navbar-collapse > ul > li > a {
    line-height: 44px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Mj]

Thanks, that’s working. I added the logo, but this is still resizing: http://youtu.be/kM7OnpxDkEI

Could you tell me how to disable this?

[Mj]

Also, these line-height css settings are affecting the mobile view as well. 🙁

[Abe]

@woekerzee
It just stroke me 🙂 Why don’t you disable the logo resize on scroll from Theme options – Header and upload your logo 50% height smaller

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Mj]

@abe, hehe that did the trick. Thanks a lot 😉
This thread can be closed.

[Author]

Posts