Sticky Header Height

abroadjapan

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

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

sec-hosting

Hi,

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

Thank you.

Pablo

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

sec-hosting

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

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

sec-hosting

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

Pablo

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

It's automatically set by the PHP and JS.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next