Header Goes Off Screen When Scrolling Comes Back When You Scroll Up

I have received several requests for a tutorial on how to change the logo image when scrolling down the page.

Why would someone need that you ask? Wells lets just say for example that your header is transparent with an image in the background and a big colorful logo in the header like on my Ghost Page Tutorial.

And then as the user scrolls down the page the dark header background color kicks in and you would like to replace the logo with a slimmer white image so that it is not so bulky looking.

Or perhaps you just want a different logo when scrolling down for another purpose. Take a look at my demo page gif below…

Lets Get Started

First thing you need to do is add your second logo (which I will refer to as logo2) to your media files.

1. Open Media Menu and Select Add New

2. Once you have added Logo2 to the media library, click on the image to bring up the image detail

3. Now that you can see the details, copy and paste the URL onto your notepad for future reference. You will need this in a moment.

Modify The header.php

If you are working with a child theme you can go to Appearance>Editor and open your header.php. If not, I strongly recommend you create a child theme for this as any modifications to your header.php will be erased when your Divi theme is updated. Here is a tutorial on creating a child theme.

4. So after uploading logo2 through the dashboard's media section, I needed to find the following original logo code in the header.php file.

          <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 then add the following code after the original logo code.

          <!--------------------------------> <!---------- 2nd Logo ------------> <!-------------------------------->     <a href="<?php echo esc_url( home_url( '/' ) ); ?>">    <img src="2nd logo url" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo2" />    </a> <!--------------------------------> <!---------- 2nd Logo ------------> <!-------------------------------->        

Now swap out "2nd logo url" in the code above with the actual url for logo2 which I asked you to save earlier on notepad.

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.

            /*------------------------------------------------*/ /*-------[Swap Logo on Scroll - Quiroz.co]--------*/ /*------------------------------------------------*/  #logo2 {display: none;} .et-fixed-header #logo {display:none;} .et-fixed-header #logo2 {display:inline;}        

If you want to have either of the two logos link to another page, check out this complimentary tutorial.

How To Link The Header Logo to Another Page

And that's it!You may have to adjust some of the logo padding, width and margins depending on the size difference of the two images you are using. You may also have to adjust header paddings and margins. But this should be enough to get you started and keep you distracted for the next few days. Have fun!

View Demo

By the way. I love providing these tutorials for free but for those of you who use these to your financial gain, might you consider buying this poor guy a coffee? Every penny helps me to continue to provide these Divi tutorials free for all to learn and grow 😉

---

Well that's all for now. I hope you find this article useful.

---

The following two tabs change content below.

• Bio
• Latest Posts

Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

You have Successfully Subscribed!

Header Goes Off Screen When Scrolling Comes Back When You Scroll Up

Source: https://quiroz.co/change-the-logo-when-scrolling-down/

Share this post