Sticky Header Height

Comments

• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• sec-hosting

  November 2019 edited 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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
  

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