If you have a logo in the header of your page you may want it to change appearance as the background changes.
At the top of the page the header background is transparent. As the user scrolls down it changes to a darker opacity. You can change your logo to a different image (I'm using SVG in this case) as this occurs, using just CSS.
At the top of the page the header background is transparent. As the user scrolls down it changes to a darker opacity. You can change your logo to a different image (I'm using SVG in this case) as this occurs, using just CSS.
In your Header Type file change the <div class="logo">{logo}</div> to be similar to this:
<div class="logo">
<h1><a href="https://yourWebsiteLocation.ext/#" class="svg" title="YourWebsite'sTitle">
</a></h1>
</div>
<div class="logo">
<h1><a href="https://yourWebsiteLocation.ext/#" class="svg" title="YourWebsite'sTitle">
</a></h1>
</div>
Upload the two logo files into your site's assets folder and then in the main CSS file of your website add the following to the bottom:
body .logo h1 a {
content: url(https://yourWebsiteLocation.ext/files/theme/logo-dark.svg);
}
body.affix .logo h1 a {
content: url(https://yourWebsiteLocation.ext/files/theme/logo-light.svg);
}
body .logo h1 a {
content: url(https://yourWebsiteLocation.ext/files/theme/logo-dark.svg);
}
body.affix .logo h1 a {
content: url(https://yourWebsiteLocation.ext/files/theme/logo-light.svg);
}