sticky header - animation and font color - Forum | JoomShaper
Staff replied Helix Framework

sticky header - animation and font color

Asked by Stefan 5 years ago Last activity 5 years ago

Hi,
is it possible to add a small animation to the header when it will become sticky header?
I want to remove the background for the normal header and add a black one when it becomes sticky. But with a small fade animation. Any idea on this?

Also I want to have a different font color for the header / sticky header.

4 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
5 years ago

Hi,

Would you please share your site URL, here?

Best Regards

Stefan Asked this
5 years ago

please see hidden content

Rashida Rahman Staff
5 years ago

Hi Stefan,

Here is the required code for your custom.css file:

#sp-header.header-sticky {
    animation: fadeInDown 1s;
    background: black;
}

Hope this will give you your desired sticky header.

Best Regards

Rashida Rahman Staff
5 years ago

Code for different font color for your menu items, while header is sticky:

#sp-header.header-sticky .sp-megamenu-parent > li > a{
  color:red;
}

You can use your own color instead.

Thanks

Log in to reply.