When a user scrolls down your website you want the logo to change and the background colour to change from white to orange.
This code uses Elementor Pro installed
Don’t install a wordpress plugin, use CSS code, it’s simple to do!
NOTE: If you have any other sticky header plugins activated – Deactivate them now!
1. Select header section – ‘Motion effects’ turn on ‘sticky header top’ – (Standard Elementor)
2. Optional – Effects offset 150px (you can change this)
3. Add an image underneath your normal logo (add as an image) You will need to use custom positioning – and absolute for each logo to align them over each other changing there z-index, one more than the other.
4. Add a class to both the original logo (.oldlogo) and new logo (.newlogo)
5. Place the code below in the custom CSS of the ‘header section’
6. Just line up the logo’s to make the effect look good. That’s it!
7. To change specific pages, just target the page using CSS (something like .elementor-page-10).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/*Change background-color when header turns sticky*/ selector.elementor-sticky--effects{ background-color:#ea5b0c !important; } selector{ transition: background-color 3s ease ; } /*Hide old logo when header turns sticky*/ selector .oldlogo { display: inline-block; } selector.elementor-sticky--effects .oldlogo{ display: none; } /*Show New logo when header turns sticky*/ selector .newlogo { display: none; } selector.elementor-sticky--effects .newlogo{ display: inline-block } /*Change text color of menu from grey to white*/ selector.elementor-sticky--effects .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item { color: #fff; } |
To just resize logo on scroll this code may help
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*Change background-color when header turns sticky*/ @media only screen and (min-width : 720px) { selector{ transition: background-color 3s ease ; } selector.elementor-sticky--effects #netlogo { width: 40%; transition-duration: 0.5s; } } |
Remember to change the effects offset, so after a certain scroll length it will change.
