How make to header sticky and inline on mobile device

There is an option for the header to be sticky and inline simply by selecting the option. This works for desk top but is not mobile responsive. How do I fix this?

Hi,

Please try this CSS code below:

@media only screen and (max-width: 1024px){
  .site-header {
      position: fixed !important;
  }
  .header-image{
      padding-top: 110px;
  }
  .header-info {
    top: 40%;
  }
}

Add the code to Customizer > additional CSS.

Regards,
Awan

It does not work properly. The header does stick on homepage but once I click on a different page folder, the header sticks to the middle of the page as I scroll. It also make the header more transparent. And it does not layout my menu options but keeps them centered.

I am sorry… please replace my code in above with this:

@media only screen and (max-width: 1024px){
  .site-header {
      position: fixed !important;
      top: 0;
  }
  .header-image{
      padding-top: 110px;
  }
  .header-info {
    top: 40%;
  }
}

Need to add top property to the site-header too.

Thank you, the header is sticky but now it covers some of my picture and words on my front page.

Okay, add this to the code please:

@media (max-width: 1200px){	
	.site-content {
		padding-top: 90px !important;
	}
}