Can’t get header to be transparent with absolute positioning on mobile devices

[SHELBERT MILLER]

my site url is novarradigital.com .

theme I am using is digital-agency

On devices with width <767px the header has a white background color. The only way I could make it transparent is with position:absolute. But that is causing elements to overlap.

How can I make it transparent without position:absolute?

[Sonnal S Sinha]

Hi,

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

@media screen and (max-width:479px) {
.nivo-caption { top:25%;}
.slider-main .nivo-caption .title { width:100% !important; max-width:inherit !important;}
.slider-main .nivo-controlNav { bottom:-10px !important;}
}

@media screen and (min-width:480px) and (max-width:767px) {
.nivo-caption { top:28%;}
.slider-main .nivo-controlNav { bottom:0;}
}

Regards,
Dave

[SHELBERT MILLER]

not working. If i remove position absolute the header becomes white again

[SHELBERT MILLER]

it also makes the header gray on large screen devices

[Sonnal S Sinha]

Hi,

We can’t make header transparent without using position absolute.

Kindly use position absolute and add this CSS to solve overlapping issue:

@media screen and (max-width:479px) {
.nivo-caption { top:25%;}
.slider-main .nivo-caption .title { width:100% !important; max-width:inherit !important;}
.slider-main .nivo-controlNav { bottom:-10px !important;}
}

@media screen and (min-width:480px) and (max-width:767px) {
.nivo-caption { top:28%;}
.slider-main .nivo-controlNav { bottom:0;}
}

Regards,
Dave

[SHELBERT MILLER]

I have add that code please check my site you will see that it is not working.. the overlapping is still happening

[SHELBERT MILLER]

ok its working now I had to remove !important from default css file but on lareg screens im seeing a thin dark layer of opacity… thats not supposed to happen

[Sonnal S Sinha]

Hi,

Your website is on under construction mode. Therefore we are unable to check the issue.

Regards,
Dave

[Author]

Posts