How make to header sticky and inline on mobile device


#1

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?


#2

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


#3

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.


#4

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.


#5

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


#6

Okay, add this to the code please:

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