If you scroll thru this site, you will see the effect.
The header content is not inheriting the row background color but instead seems to have a CSS blend mode of "difference" or "exclusion" to give the effect of the opposite color of the page's content. I have seen that blend mode style on Salient in the carousel touch indicator border style and in the templates section "non-profit recent posts".
With all that said, is there a CSS snippet to set the header content blend mode to "difference" or "exclusion" ? If not, can I add that as a featured request for a future release after this 14.5 release?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hi Guys!
Is there a CSS snippet to make a permanent transparent header be the opposite (inverted) color of the underlying page content like this example site:
https://massagemcgarr.com
If not, can I please submit this as a request for a future feature.
Thanks!
Mike
Hello Michael,
Thanks for keeping in touch.
Please head to Salient > Header navigation > Transparent header the enable this option:
Header Inherit Row Color
Thanks.
Hi Judith!
Thanks for the reply! The header navigation would be set to permanent transparent, however in the site example:
https://massagemcgarr.com
If you scroll thru this site, you will see the effect.
The header content is not inheriting the row background color but instead seems to have a CSS blend mode of "difference" or "exclusion" to give the effect of the opposite color of the page's content. I have seen that blend mode style on Salient in the carousel touch indicator border style and in the templates section "non-profit recent posts".
With all that said, is there a CSS snippet to set the header content blend mode to "difference" or "exclusion" ? If not, can I add that as a featured request for a future release after this 14.5 release?
Thanks again!
Mike
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#header-outer { mix-blend-mode: difference !important ; }Thanks
ThemeNectar Support Team
That worked perfect! Much Thanks Tahir!