Disable Sticky Header on smaller screens

Hi,

I am facing problems with the sticky header on smaller screens as it takes up too much space. How can I disable it on smaller screens, esp. below 600px?

thanks

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width:599px){
   
   .site-header,
   .site-header.float-header{
      position: static !important;
   }
   
}

Regards,
Kharis

I have added, but its still sticky :slight_smile:

thanks,

him

Hello there,

Where did you add the code I suggested? Could you please confirm if the group of the code where it be part of is error free? You can check it here.

If possible, please share the link to your site, so I can inspect it directly and provide the possible solution.

Regards,
Kharis

Hi Kharis,

I added the code in the media queries @max-width 600px section. Also checked with the tool, no errors found.

Here is the link.

thanks,

him