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

Learn how to replace your WordPress sticky header logo with another one, just by using Elementor Pro and a little bit of CSS.

NOTE: Please change the position of the new logo on tablet and mobile devices using Custom Positioning so that it’s properly visible on mobile devices, all right after you just pick your new logo.

Get Elementor Pro:
https://bit.ly/designelementorpro

If you want to make the logo Black and White on scroll :
https://youtu.be/J_HdZ6x6t5I

If you’re new to Elementor, learn the basics here:
https://youtu.be/ztBu0qCbrxk

Join our Facebook Group: https://www.facebook.com/groups/designschoolwp

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*/

Image Credits for thumbnail:
https://www.freepik.com/freepik

Happy designing 🙂