Sticky Header Height

As far as I read betheme does not have option to change the Sticky Header Menu height. How can I change the height? 

Comments

  • Maybe try this css in custom css section of betheme:

    /* Header Menu Bar */
    #Top_bar .top_bar_right { height: 60px !important; }
    #Top_bar .menu > li > a { padding: 0 !important; }
    #Top_bar #logo { padding: 0 !important; }

    #Top_bar.is-sticky { height: 60px; }
    #Top_bar.is-sticky .menu > li > a, #Top_bar.is-sticky .menu > li > a span { line-height: 50px; }
    #Top_bar.is-sticky #logo { padding: 12px 0; }


    Unfortanly this worked on our start page, but not on every page. Why? :/
  • Hello,
    Yes, indeed the Sticky Header Height does not have any option to increase the height of it.
    It can be only changed with the custom CSS.
    sec-hosting is working on the homepage, then it should work on all of the pages where the top_bar(menu) appear.

    Please send me a link to your pages.
    Thanks
  • Hi,
    i sended an privat message to muffin group account with the url.

    Thank you.
  • It is working for whole website - I've increased the height value:

    I do not understand the problem.
    Thanks
  • edited November 2019
    Startpage:

    Subpage:

    this is not the same height on the star page vs an subpage..
    but in css both is setted to the same pixel value:

    /* Header Menu Bar */
    #Top_bar .top_bar_right { height: 60px !important; }
    #Top_bar .menu > li > a { padding: 0 !important; }
    #Top_bar #logo { padding: 0 !important; }

    #Top_bar.is-sticky { height: 60px; }
    #Top_bar.is-sticky .menu > li > a, #Top_bar.is-sticky .menu > li > a span { line-height: 50px; }
    #Top_bar.is-sticky #logo { padding: 12px 0; }
  • Dear Pablo, 

    Yes it did work on our homepage. I changed the sticky bar height to 100px and it is working just fine. 

    Thanks to sec-hosting for the custom CSS. 

    I appreciate your support. 

  • Hello,
    the main header height is not set by the "hegith" value, it is set by the logo height and its vertical padding. You cannot change it with CSS, it calculates it with PHP and JS.
    You can only change the sticky header height with the CSS, which is working fine.
    thanks
  • so it is only possible to adjust the height of the sticky header, not for the "normal" main header? is that correct?
  • Yes, the basic header size depends on the content inserted there.
    It's automatically set by the PHP and JS.

    Thanks
Sign In or Register to comment.