Search
Generic filters
Exact matches only
  • Elementor Sticky Header – replace logo on scroll

    10th September 2019

    Random Coding

    random coding category codehaven

    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).

    To just resize logo on scroll this code may help

    Remember to change the effects offset, so after a certain scroll length it will change.
    Elementor Sticky Header,,

    Was this code snippet helpful?

    Comment on this Code Snippet?