Completely remove semi-transparency from the header photo?


#1

How do you completely remove the semi-transparency from the header photo? I used:

.site-header {
position: relative;
background-color: transparent !important;
margin-bottom: 80px;
border-bottom: 5px solid #fbb829;
}

but it is still not a clean picture, but in white.

See:
http://jupi-tupi.pl

And how to change the transparency level in the top menu bar? To show the photo a little more?


#2

Hi,

Here is the CSS code to remove the transparency in the header image:

.site-header:after {
    opacity: 1;
}

And this to make the top bar transparent:

.main-navigation {
    background: rgba(60, 60, 60, 0.5);
}

Adjust the last value of the rgba value (0.5) for leveling the opacity.

Regards,
Awan


#3

Thank you for the answer, it’s nice that someone has reacted, but it does not work.

I did the original CSS without modification, I added your modification

.site-header:after {
    opacity: 1;
}

and… nothing has changed.

The header is still translucent and nothing has changed. Can I ask for the full CSS code with modification? Maybe I did something wrong? The idea is to make the top menu bar more transparent, and the header looks like a normal picture, without translucency.


#4

No
opacity: 1;
only
opacity: 1 !importatn;
and now it is working.

No
background: rgba(60, 60, 60, 0.5);
only
background: rgba(60, 60, 60, 0.5) !importatn;
and now it is working.


closed #5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.