Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsGeneral
How to Change the Site's Logo When the Page is Scrolled
How to Change the Site's Logo When the Page is Scrolled

Learn how to configure theme settings and use custom CSS to effectively change the logo image between the fixed and scrolled browser states.

Updated over 5 months ago

Changing your site's logo when the page is scrolled can enhance your website's visual appeal and improve user experience. This dynamic effect can make your branding more engaging and help draw attention to different states of your website.

In this article, we will guide you through the process of changing your site's logo when the page is scrolled using Divi.

Change the Logo Image using the default Divi Header Navigation

  1. Upload the two logo image files to your WordPress Media library

  2. Take note of both file's URLs:

    WordPress - Upload two different logo images

  3. Go to WordPress Dashboard → Divi → Theme Options → General Tab

  4. For the Logo option, paste the image URL that you want to show when the page loads

  5. Ensure that the Fixed Navigation Bar option is enabled

    Divi theme options

  6. Go to Divi → Theme Options → General Tab → Custom CSS and add this CSS Code:

    .et-fixed-header #logo {
    content: url(https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg)
    }

Important note: Make sure that you replace the https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg URL with the URL of your image that you want to show when the Header area is in Fixed state.

The result can be seen in the screencast below:

Change the logo image for the fixed state

Change the Logo Image using the Menu module

This process can be used if you use Theme Builder to create custom header layouts.

  1. Open the Menu module settings by clicking on the Gear icon

  2. Ensure that the Logo image is added to the Menu module's Content Tab → Logo

    Menu module - Add the Logo image

  3. If the Menu module is set to be Stick at Top in Advanced Tab → Scroll Effects, add this CSS code to Advanced Tab Custom CSS Free Form CSS:

    selector.et_pb_sticky--top .et_pb_menu__logo img {
    content: url(https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg)
    }

    Menu module Free Form CSS

  4. If the Section that contains the Menu module is set to Sticky at Top in the Section's settings → Advanced Tab → Scroll Effects, add this CSS code to the Section's Advanced Tab Custom CSS Free Form CSS:

    selector.et_pb_sticky--top .et_pb_menu__logo img {
    content: url(https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg)
    }

    Section Free-Form CSS

Important note: Make sure that you replace the https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg URL with the URL of your image that you want to show when the Header area is in Fixed state.

The result can be seen in the screencast below:

Divi - Theme Builder - Global Header - Change the Logo image
Did this answer your question?