on Everly template you have several examples where the header_row is transparent, as long as you do not scroll down (Desktop view, not mobile!).
If I set the header background-color option in the template parameters to something like rgba(255, 255, 255, 0.5) I have transparency the whole time.
In your source code (e.g. in Example 3) you have this statement as inline CSS on line 326:
@media only screen and (min-width: 768px) {
.header_row, .header_top {
background-color: transparent;
}
}
I put this statement to my custom.css.
But it does not work.
If I set it to
background-color: transparent !important;
instead of
background-color: transparent;
I have transparency the whole time (again) ....
So for me it seems, you have written this @media css somewhere in the code of the page?
I tried the following solution:
I added it to Custom Code in the template configuration with a style tag around it.
But not only the part above with the background-color: transparent but the whole part of the css I found in your source-code of example-3:
<style>
@media only screen and (min-width: 768px) {
#container_header,
.sticky-wrapper {
position: absolute;
}
.header_row, .header_top {
background-color: transparent;
}
.layerslideshow698 .info {
opacity: 0;
transition: opacity .5s;
}
}
</style>
Now it works as I want it.
If needed, I can set transparent to something like rgba().
Maybe there is a better solutions so please feel free to correct me.
I have written this, because I think it may help others too.
Regards
Oliver
