How to adjust header opacity before scrolling? I can only make it fully transparent with "Use Transparent Header When Applicable", or to have a solid colour. I would need:
Before scrolling the color is solid, or I can set it to be transparent.
Even if this setting would work, it wouldn't be the best way to do this. I would need to adjust this on every page of the site. I would rather do this with CSS.
Hello,
How to adjust header opacity before scrolling? I can only make it fully transparent with "Use Transparent Header When Applicable", or to have a solid colour. I would need:
body #header-outer, body[data-header-color="dark"] #header-outer {
background-color: rgba(10, 10, 10, 0.30) !important;
}
How to do this?
Thanks,
:E
Hey there,
Try using the Force Transparency Option in "Page Header Settings" Metabox . See screenshot : http://prntscr.com/gjnyit .
Let us know if this helps
Best
Hello Andrew, and thank you for your answer.
I'm sorry but this does not work. I do not want the header to be transparent, I need to change background color opacity:
background-color: rgba(10, 10, 10, 0.30);
Now I have the correct opacity after scrolling, which is set here: https://monosnap.com/file/4vPa4yWTy05wuoUZcUdR62JRPlJeJr
Before scrolling the color is solid, or I can set it to be transparent.
Even if this setting would work, it wouldn't be the best way to do this. I would need to adjust this on every page of the site. I would rather do this with CSS.
Thanks,
:E
Hi E,
Use the following custom css:
@media (min-width: 768px){ #top .container { background-color: rgba(10, 10, 10, 0.30) !important; } }Do share a link to your website so that we check from there if something is missing.
Hope this helps.