Header mobile only front page white

Hi

I want my header front page_ also in mobile devices to be white and not transparent. My website www.becht.dk.

This is my front age 1024px

This is my frontpage on moblie. Transparent header and not white.

This is my other pages. Transparent header and ok .

Kind regards
Peter

Hi,

Did you mean that you want to remove the dark overlay color on your header image? if yes, put these custom CSS code below into Customize > additional CSS

.overlay {
    background-color: transparent;
}

Regards,
Awan

Hi

Sorry I was maybe not so clear.
No _Its about the white header background on home/front page where I have site title and menu. It disapears in moblie devices.

I want it only on my home page and not on the other pages. I have put my front page to “No header only menue” and al other pages to “image”. But on mobile devices the front page white header disapears,Se front page on screen 1920.

Is there a possibilty to get the white header " No header only meny" on only the front page on mobile devices ?
Kind regards
Peter

I see… previously you give me incorrect site URL, that’s why I can’t find the same issue like yours.
www.becht.se not www.becht.dk

After I investigate your site, I noticed the issue was caused by your current custom CSS code.
To fix the issue, you have to remove the line with the red square. Please see this screenshot http://prntscr.com/i18t5g

Thanks Awan

Sorry about the wrong url. ist of course www.becht.se.

It fixed the problem on my front site but it also become a white header on al other pages on mobile devices. See attached photo.
Its only on my front page I want the white header _ likewise in screen 1024 to 1920. Is this possible to have the white header responsive down to mobile devices, but only on front page _ not he other pages ?

Kind regards
Peter

Hmm okay… then please try replace your code:

@media only screen and (max-width: 1024px){
  .site-header {
     background-color: transparent !important;
     height: 0 !important;
     padding: 0 !important;
  }
}

with this:

@media only screen and (max-width: 1024px){
  .site-header {
     background-color: transparent !important;
     padding: 0 !important;
  }
  body:not(.home) .site-header {
     height: 0 !important;
  }
}

Jubii _ it works super
Thanks Awan

Kind regards
Peter