Solved Helix Framework

header text and background color change when sticky

Asked by Alison 1 year ago Last activity 1 year ago

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?

Accepted answer

Marked as the solution

Mehtaz Afsana Borsha Staff

1 year ago · edited

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.

8 more replies

Paul Frankowski Senior Staff

1 year ago · edited

Alison, 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 Asked this

1 year ago · edited

Thanks 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 Senior Staff

1 year ago · edited

becuase 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 Asked this

1 year ago

Actually that is a great point. I will start asking Copilot to write my code, see if that helps me.

Alison Asked this

1 year ago

Is 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 Senior Staff

1 year ago

In 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 Asked this

1 year ago

OK, thanks

Alison Asked this

1 year ago

I 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 :)

Mehtaz Afsana Borsha Staff

1 year ago

Hi Alison,

Glad to know that its working and thanks for accepting the answer.