Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

I have a tutorial on swapping the logo when you scroll down and have the fixed header enabled. But its rather clunky unless you add some cool transition effects.

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

So here is the new and improved version which has the vertical logo slide up and the horizontal (or square) logo slide in from the left.

You can check out the demo here: https://nationalinfantrymuseum.org/

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

002

 

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

 003

 

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.

004

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" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" /></a>

 

and then add the following code after this 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.


/*------------------------------------------------*/
/*--------------------[LOGO]----------------------*/
/*--------- [CUSTOM CSS BY GENO QUIROZ] ----------*/
/*------------------------------------------------*/

/* logo over top header and reduce logo container width */
	#top-header {z-index: 99998!important;}
	#logo {z-index: 99999!important; position: relative!important;}
	.et_header_style_left .logo_container {	width: 150px;}

/* logo swaps */
	#logo {display:block!important; opacity:1;} 
	#logo {
    		max-height: 480%!important;
    		margin-top: -111px;
    		z-index: 9999;
    		position: static;
  		-webkit-opacity: 1;
  		-moz-opacity: 1;
  		opacity: 1;
		-webkit-transition: all 1s ease;
  		-moz-transition: all 1s ease;
  		-ms-transition: all 1s ease;
  		-o-transition: all 1s ease;
  		transition: all 1s ease;}

	.et-fixed-header #logo {  
		-webkit-opacity: 0;
  		-moz-opacity: 0;
  		opacity: 0;
		margin-top:-500px;}

	#logo2 {
    		max-height: 153%;
    		margin-top: -230px;
		margin-left:-1650px;
  		-webkit-opacity: 0;
  		-moz-opacity: 0;
  		opacity: 0;
		-webkit-transition: all 1s ease;
  		-moz-transition: all 1s ease;
  		-ms-transition: all 1s ease;
  		-o-transition: all 1s ease;
  		transition: all 1s ease;}

	.et-fixed-header #logo2 {
		margin-left: 0px;
		margin-top: 163px;
  		-webkit-opacity: 1;
  		-moz-opacity: 1;
  		opacity: 1;
		-webkit-transition: all 1s ease;
  		-moz-transition: all 1s ease;
  		-ms-transition: all 1s ease;
  		-o-transition: all 1s ease;
  		transition: all 1s ease;}


	@media only screen and (max-width : 980px) {
		#logo2 {display:none;}
		#logo {max-width: 75%!important; margin-top: -80px; margin-left:10px}}


		

 

This code is designed top work with a Top Header enabled. If you don’t use a top header, you will have to reduce or remove the negative margin-top.

Keep in mind you will most likely have to adjust the following to make it work with your specific image sizes.

  • max-height
  • max-width
  • margin-left
  • margin-top

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! Remember you may have to adjust some of the logo width and margins depending on the size difference of the two images you are using. You may also have to adjust header padding and margins. But this should be enough to get you started and keep you distracted for the next few days. Have fun!

View Demo


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


The following two tabs change content below.
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.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest