Hope: Logo Change When Scrolling
Deich8
Hello, How can I make the logo change when scrolling in the Hope template? Best regards, Ingo
Rashida Rahman
Accepted AnswerHi there!
Thanks for reaching out.
Please use the following code in your custom CSS:
#sp-header.menu-fixed .logo img { opacity: 0; }
#sp-header.menu-fixed .logo a { background-image: url(relaunch.deich8.de/images/startseite/knoten2.svg); background-repeat: no-repeat; background-size: contain; }I have used a random image link from your site, so please replace the image link with your desired one.
Hope this helps!
Best Regards
Deich8
Accepted AnswerThank you for the quick reply, it works. Can I also change the menu colors while scrolling? Best regards, Ingo
Rashida Rahman
Accepted AnswerYou're welcome Ingo :)
Here is the sample code:
#sp-header.menu-fixed .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span{
color: green;
}Best regards,
Paul Frankowski
Accepted AnswerCan I also change the menu colors while scrolling?
Menu items color or Header background color ?? You're webmaster not beginner - use more details.
In general, the key is "#sp-header.menu-fixed" class .menu-fixed that is used for header (in all Helix3 templates) when header is scrolled down and is still visible.
Please copy& paste to your notepad to remember for the future ;)
Rashida Rahman
Accepted AnswerActually, .header-sticky class is for Helix Ultimate and .menu-fixed class is for Helix3 in general.
Rashida Rahman
Accepted AnswerHello Ingo,
Please let us know if the responses was helpful. And if there are no related issues lefy, you may accept the most useful answer in order to close the post.
Best regards,