Layerswp (Free version) CSS for header bar custom height

Asked on July 21, 2016 in Customization.

How can I change the height of the header menu bar in Layers non paid version?
For example making the bar height only 28px..

Thanks!

megandf Layers User
Reply
  • Possible Answers to Your Question:

  • 2 Answer(s)
    Answered on July 22, 2016.

    Hi ,

    In the css tab add the following code :

    
    .header-site .container {
    
    height: 50px;
    
    }
    
    

    Change height to what you want for example the 28px.
    this includes the container selector
    when you do it without and only .header-site
    the header text ( logo and menu) won’t scale with it.

    -Dieter

    Reply
    Answered on July 22, 2016.

    The header height is determined by your logo height. By default this is maxed to 80px to support a sticky header,  with a line height/default font size amounting to roughly 40px. The rest is padding (20 above and 20 below). The following explains how to manipulate the logo with or without Layers Pro: https://docs.layerswp.com/doc/how-to-make-the-logo-bigger/

    28px may not be tall enough to support the menu properly or several extensions that add stuff to the header so keep that in mind if you are making this modification to a commercial child theme. Because the header has 40px of padding by default, the first thing you need to do is reduce that to more like 4px, then set the actual height to 20px.

    You can find further resources for customizing the header here:

    Everything You Ever Wanted To Know About the Header

    Reply