How to change the logo in Divi header when you scroll down1

by Jan 19, 2020Projects, Tutorials0 comments

Here I am with another tutorial.
I want to explain to you how to change the logo in Divi header when you scroll down. I have used this trick in this website: http://www.bellunesinelmondo.it/

You have to do simply 3 things:

  1. Add the second logo you want to show after scroll down in you media gallery
  2. Add 3 lines of code in the file header.php
  3. Add 3 lines in your css

Please, create a child theme to do this thing.

Step #1

Add the second logo you want and copy and paste the URL.

Step #2

Open the file header.php (in your child theme) find the lines where there is the logo:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">

<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />

</a>

and add copy this code:

<!-- NEW LOGO --><a href="<?php echo esc_url( home_url( '/' ) ); ?>">

<img src="***new logo url***" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logonew" />

</a>

<!-- END NEW LOGO -->

Step #3

Open your child css and add this code:

#logonew {display: none;}

.et-fixed-header #logo {display:none;}

.et-fixed-header #logonew {display:inline;}

 

And that’s all.