Sticky Header Height

abroadjapan · November 2019

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

sec-hosting · November 2019

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?

Pablo · November 2019

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

sec-hosting · November 2019

Hi,

i sended an privat message to muffin group account with the url.

Thank you.

Pablo · November 2019

sec-hosting

It is working for whole website - I've increased the height value:

http://prntscr.com/q2tapc

I do not understand the problem.

Thanks

sec-hosting · November 2019

Startpage:

https://prnt.sc/q2wsnk

Subpage:

https://prnt.sc/q2wr8w

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; }

abroadjapan · November 2019

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.

Bryan · November 2019

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

sec-hosting · November 2019

so it is only possible to adjust the height of the sticky header, not for the "normal" main header? is that correct?

Pablo · November 2019

Yes, the basic header size depends on the content inserted there.

It's automatically set by the PHP and JS.

Thanks

Sticky Header Height

Comments