This topic has 16 replies, 3 voices, and was last updated 9 years by Mj.

  • Author
  • #31167
     Mj
    Participant

    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?

    #31169
     Mj
    Participant
    COPY CODE
    
    .kleo-main-header .navbar, .kleo-main-header .navbar-collapse ul {
        line-height: normal;
    }
    

    does not work.

    #31203
     Catalin
    Moderator

    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
    #31217
     Mj
    Participant

    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.

    #31246
     Mj
    Participant
    This reply has been set as private.
    #31247
     Catalin
    Moderator

    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
    #31249
     Mj
    Participant
    This reply has been set as private.
    #31250
     Mj
    Participant

    Oops, could you make it private please??

    #31251
     Mj
    Participant
    This reply has been set as private.
    #31346
     Mj
    Participant

    BUMP

    #31392
     Abe
    Keymaster

    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.

    #31413
     Mj
    Participant

    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.

    #31446
     Abe
    Keymaster

    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.

    #31679
     Mj
    Participant
    This reply has been set as private.
    #31780
     Mj
    Participant

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

    #31802
     Abe
    Keymaster

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

    #31929
     Mj
    Participant

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

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

The topic ‘Unable to reduce the height of the header’ is closed to new replies.

Log in with your credentials

Forgot your details?