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]

This reply has been set as private.

[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]

This reply has been set as private.

[Mj]

Oops, could you make it private please??

[Mj]

This reply has been set as private.

[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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Mj]

This reply has been set as private.

[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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Mj]

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

[Author]

Posts