Staff replied Templates

How to change mega menu backlight color effect on scroll

Asked by gianlu 4 years ago Last activity 4 years ago

Hello , on template opus i need know how to change backlight color effect that change on scroll.. i need if is possible to leave locked in the way wide like before scroll even after scroll leaving all same
I enclose screenshot like i want to stay locked. need even to put text white. Thanks

https://www.screencast.com/t/1zv4f2dc7nO

11 replies

Oldest first Newest first Most helpful
Ofi Khan Staff
4 years ago

Hello gianlu

Please use this CSS to Template Options -> Custom Code -> Custom CSS

#sp-header.header-sticky{
    padding: 40px 0px;
}
#sp-header.header-sticky:before {
    background-image: linear-gradient(90deg, #aea6ff 0%, #6973fd 100%);
    transition: 0.3s;
    opacity: 1;
}

Best regards

gianlu Asked this
4 years ago

Thanks!
If i want tu put deep blue instead of current backlight mega menu color like screenshot:
https://prnt.sc/2t3SbwBbj3jx
it's enough change hex color in your custom css? which is hex code of this color? thanks

Ofi Khan Staff
4 years ago

Yes, just change the color code in the CSS. The color code is #27285D But what change do you need? If you use the below CSS, then you will get the dark blue color both in sticky header and normal header.

#sp-header {
    background: #27285D;
}
#sp-header:before, #sp-header.header-sticky:before{
    opacity: 0;
}
gianlu Asked this
4 years ago

Hello, the header is fine now in this color. Last thing to do as you see it is to put menu items in white instead of in black as they currently are. How do you change? Thank you

https://prnt.sc/1F53A5piURm3

Ofi Khan Staff
4 years ago

Please use this CSS to Template Options -> Custom Code -> Custom CSS

.sp-megamenu-parent>li>a{
    color: #fff;
}
gianlu Asked this
4 years ago

one last thing. I saw that from mobile the mobile menu symbol as in screenshot is black and I can't change it. is it possible to put this white too? thanks
https://prnt.sc/GUD09weuvktF

Ofi Khan Staff
4 years ago

Please use this CSS to Template Options -> Custom Code -> Custom CSS

#offcanvas-toggler>.fa{
    color: #fff;
}
Ofi Khan Staff
4 years ago

Which site are you refering to? I can see blue header.

Log in to reply.