Header Text And Background Color Change When Sticky
Alison
Hi
I want the header text and background to change when the user scrolls and it becomes sticky.
I have the following code in place
#sp-header {
background: rgb(82 82 82 / 20%); !important;
color: rgb(255 255 255) !important;
}
#sp-header.header-sticky {
background: rgb(255 255 255) !important;
color: rgb(82 82 82) !important;
}The main header is fine (white text on shaded background), but when i scroll the sticky text color only changes to rgb(82 82 82) on the menu headings, not on menu links.
The custom preset for the menu is set to #ffffff - so I guess that is why the links are not changing on sticky?
Can you help me to correct my code/settings please?
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us and sorry for your issue. You can try this CSS in your custom.css file
#sp-header.header-sticky .sp-megamenu-parent > li > a {
color: #525252 !important;
}
-Regards.
Paul Frankowski
Accepted AnswerAlison, why you don't use comma between RGB or RGBA values?
https://www.w3schools.com/Css/css_colors_rgb.asp
Class name for links is different, and a little more complex for sticky header.
#sp-header.header-sticky .sp-megamenu-parent > li > a {color: red;}
but still easy as you can see above ;]
Alison
Accepted AnswerThanks Both
The 20% background didnt work with the commas in the RGB values, but it did work without. Anyway, i have updated it after reading your link
So i now have this which seems to work OK
#sp-header {
background: rgba(82, 82, 82, 0.2); !important;
color: rgb(255, 255, 255) !important;
}
#sp-header.header-sticky {
background: rgb(255, 255, 255) !important;
color: rgb(82, 82, 82) !important;
}
#sp-header.header-sticky .sp-megamenu-parent > li > a {
color: #525252 !important;
}
Thanks for your help. I am very new to writing this code, and not very good I am afraid :(
Paul Frankowski
Accepted Answerbecuase RGB is not the same as RGBA. Small but important difference.
Right now writing a good CSS code is "a piece of cake" compared to the resources available 20 years ago ;] Even Alexia from your iPhone can tell you how CSS should look like, haha.
After all, I am happy that you figure out.
Alison
Accepted AnswerIs there any way I can change the logo between the main header and the sticky menu I would like to use a white logo on the main header and a colored logo on the sticky scrolling menu.
Is this possible?
Paul Frankowski
Accepted AnswerIn theory yes, but as I remember not easy. It request deeper CSS or php customization. I think it would be beyond support that we can offer here.
Alison
Accepted AnswerI think I have managed it with
#sp-header .logo img {
content: url('/images/pr-logo/Professional_Reflexology_Logo_White.png');
}
/* ---CHANGE LOGO FOR SITCKY MENU--- */
#sp-header.header-sticky .logo {
content: url('/images/pr-logo/professional_reflexology_logo.png');
}
Seems to be working OK :)