Minimum height of a headder

I need the height of a header (for all pages except a home page) to be stop shrinking at a certain point.

Can I set the minimum height, so no matter what size screen you’d be on it would always be at least 250px high?

Thanks
Tom

Dear Tom,

You can use the CSS code below and insert it into your site’s additional CSS option (Appearance > Customize > Additional CSS).


#slideshow{
  max-height: 250px !important;
}

.slide-inner {
  min-height: auto;  
}  

The result might break the the slide’s content. I am assuming you didn’t need to display slide title, description, and all to action button.

Regards,
Kharis

@media only screen and (max-width:1024px){
  
  #masthead.site-header,
  #masthead.site-header.fixed{
    position: absolute !important;
    background-color: transparent !important;
  }
  
}

How do I achive for this code to apply to home page only?

Thanks for you support, it’s very much appreciated.

Hello there,

Each page has some a unique body class. For homepage, it is .home. So you need to precede every selector with that. So the code will look like this:


@media only screen and (max-width:1024px){
  
  .home #masthead.site-header,
  .home #masthead.site-header.fixed{
    position: absolute !important;
    background-color: transparent !important;
  }
  
}

Regards,
Kharis