Header Front Page mobile and tablet

[Lindy]

Dear Sir/Madam,

I need some assistance for the following webpage: whitehotelboavista.com
I added Custom CSS to make the header as I want it (Transparent), which works for desktop, tablet and mobile. The only issue I have, is that the Front Page on Mobile and Tablet does not adjust to the CSS that I inserted. So on all pages it works perfectly, except for the front page. Any help is appreciated. Find below the whole Custom CSS that I used.

Best regards,

Lindy

span.desc{display: none;}

.header, .top-bar { background-color:rgba(0,0,0,0.2) !important;}

.logo .logo-bg { background-color:transparent !important;}

.header_wrap.layer_wrapper {
position: absolute !important;
z-index: 10;
width:100%;
}

@media screen and (max-width:767px) {
.header {background-color:transparent !important;}
}

@media screen and (max-width:479px) {
.header .header-inner {background-color:transparent !important;}
}

@media screen and (max-width:479px) {.logo img { display:none !important;}
}

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:767px) {
body .header_wrap .header, body.home.has_trans_header .header {
    position: relative !important;
}
}

Regards,
Dave

[Lindy]

Hi Dave,

Thank you for your reply but it didn’t resolve the issue.
Do you have another idea how to solve it?
It’s quite odd as for the other pages (the other menu items) it all works fine and exactly how I like it.

Best regards,

Lindy

[Sonl Sinha]

Hi,

Kindly use this one.

@media screen and (max-width:767px) {
.home.has_trans_header .header {
    background: rgba(0,0,0,0.2) !important;
}
}

Regards,
Dave

[Lindy]

Hi Dave,

That worked! Thank you very much.

Lindy

[Sonl Sinha]

Hi,

If you found our service good kindly review us here: https://www.trustpilot.com/review/sktthemes.org

Regards,
Dave

[Author]

Posts