How to change WordPress Logo on Scroll on Sticky header with Elementor

CSS Code from the video:

/*Change background-color when header turns sticky*/
selector.elementor-sticky--effects{
   background-color:pink!important;
}

selector{
   transition: background-color 4s ease ;
}


/*Hide old logo when header turns sticky*/

selector .oldlogo
{
    visibility:visible;
}

selector.elementor-sticky--effects .oldlogo{
   visibility: hidden;
}


/*Show New logo when header turns sticky*/

selector .newlogo
{
    visibility:hidden;
}

selector.elementor-sticky--effects .newlogo{
   visibility: visible;
}
/*End of the code*/

Share this post
Facebook
Twitter
LinkedIn

Author: Deborah Butler

I’m passionate about diversity in WordPress & Tech, and have been a diversity community leader for the Codeable Women Experts and the LGBTQI+ Experts on the platform for 2yrs.

Need Help With Your Website?

I'd love to chat more about your vision!