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!
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.
Thanks Geno! Quick question: how do I make the CSS active only on the home page?
Actually what I want is the logo1 to logo2 transition to be on the home page only. I want logo2 to be displayed on all other pages. Any help with that would be great! Thanks!
It would be a combination of sorts between this tutorial and the one I have here @ https://quiroz.co/create-different-logo-and-menu/
The thing you want to look out for is the use of .home, .page, and .single in the other tutorial. You may also want to include .search and .category. Between this tutorial and that one you should be able to figure it out.
Thanks again. When I add code to specify the behaviour on specific page types, it does control which logo version is being displayed, which is great. unfortunately it breaks the top-nav menu. It causes the menu to be displayed on 3 lines. Any suggestions on fixing that problem?
It could mean that the logo and menu are not fitting on one line so the nav moves down to the next line. Try decreasing the width of the logo and/or the nav menu.
Geno, there was a checkbox in Divi Booster that was causing the problem. Everything works now. Thanks again!
Awesome. Thanks for letting me know!
Thanks a lot Geno! Works great…the only problem I’m having is that my 275px wide logo2 is filling up all the space between where the logo begins and my menu…making it much larger than what it should be. How can I fix this? My first logo is just a clear png that’s 10x10px.
Send me a link
It magically fixed itself. Not sure why. Maybe a cache issue. But its all good now and looks fantastic. Thanks for the tutorial!
🙂
Hi Bro! What to do? i only see divi_children_engine.php, footer.php, and functions.php when i access appearance>editor 🙁
It means you did not set up a header.php file when you created the child theme. If you have access to your server via ftp, then you can drag a copy of your header.php file from the Divi theme folder into your computer, then you can drag it back into your child theme folder. Then go back into wordpress and it will now be in there ready for you to edit.
Geno, great little tut, is there anyways to make the second logo ease in rather then a hard swap?
Hi Colm. I dont have a solution for that one yet. Let us know if you get to it before me 🙂
Well shoot, this does not swap, but instead adds the second logo full screen. 🙁
http://ukulelenow.towne-cox.com/
Add this…
Thank you.
Geno, this solution still works with Divi 2.5.6.
I turned off the Auto Hide Logo on Fixed Navigation in the DIVI settings and had to add !important to the CSS line : .et-fixed-header #logo2 {display:inline;}
so…. .et-fixed-header #logo2 {display:inline !important;}
but that is just as likely to do with my particular setup as anything else.
Thanks for a great solution.
Cheers,
John.
Hey Geno,
Thanks for the great tuts…
I am having a problem on a test site I thru up, http://logicinternet.com/htv/ You will see, both logos appear… I have added the css you suggest already in this thread, no joy..
Any suggestions?
/*—————–Try this code .,use !important——————————-*/
#logo2 {display: none;}
.et-fixed-header #logo {display:none !important;}
.et-fixed-header #logo2 {display:inline;}
For me it worked on 2.5.6 when:
#logo2 {display: none;}
.et-fixed-header .centered-inline-logo-wrap #logo {display:none;}
.et-fixed-header .centered-inline-logo-wrap #logo2 {display:inline;}
Header chunk looks like so:
<a href="">
<img src="" alt="" id="logo" data-height-percentage="" />
<a href="">
<img src="/wp-content/uploads/2015/12/mini-logo.png" alt="" id="logo2" />
Hi There,
I am trying to figure out how can I swap logo position on scroll. Logo starts on top of the top menu, then moves smoothly to the side of the menu on scroll.
Any suggestion of where to start would be extremely appreciated
Thanks
Alex
how can I align the swapped logo vertically?
Adjust top and/or bottom margins of either one of the logos via css
Hello.
Here is another example of changing logo and menu bar — znak.com.
It will be great you find the time to explain it. Thank you.
Any updates on getting this to work with the 2.7 series of Divi? I’ve tried to implement it, even using some of the information in the comments section regarding 2.5.6, but nothing seems to work.
Hey Jace. Try this updated tutorial. It works great with 2.7. https://quiroz.co/swap-horizontal-logo-with-vertical-logo-on-scroll/
Hey thanks Geno!
I spoke too soon my friend. That didn’t work for me either.
BUmmer. There is probably a conflict with something else on your site. Here is an example of using this same code on Divi 2.7 http://www.nationalinfantrymuseum.org/
Yeah, that was the first time I saw it in action, and gave me the idea to use it for this client. If I posted it up would you be willing to take a look?
Here’s the site in question:
http://thelandingcurrentriver.com/
What’s interesting to note, is that when I use the code the updated tutorial you mentioned, not only does logo2 not replace logo1 on scroll, but the original logo is reduced to a fraction of its previous size and no longer extends past the navigation panes.
The logo is there. Just change the top and left margins like this.
And you can play with the logo width to make it bigger.
Geno, my friend, you are so awesome! You’re making me look good with the boss, because he’s looking good with the client. Look for me to put a little in your tip jar when we get paid on this account next month.
One more question if I may… what’s the secret to getting logo2 be the logo on pages other than home like you did for the infantry museum?
Hey Jace. Glad it worked out. The answer is not easy hahaha. Here is all the logo css I used for that project. I had to make use of .page and .home to target the home page versus the other pages. Perhaps after looking at this, you can piece together what you need to do.
Hey Gene, Thanks for this. I tried it, and it worked pretty well, except that the normal logo would no longer sit on the left side of the site.
Here’s an attempt to use CSS only to swap out the logo; tell me what you think. I’d love for there to be some way to animate the fixed-header logo, like a 5px ease left on scroll. Any ideas?
http://www.bayleybulletin.com/
Great work on that site. This tut was designed for Divi but it might help point you in the right direction. https://quiroz.co/swap-horizontal-logo-with-vertical-logo-on-scroll/
Hey Geno, this is brilliant stuff mate. Using the same code in your tuts.
The swap out works perfectly when scrolling, but the nav header keeps stretching to meet the logo’s size?
Any ideas?
Probably need to adjust logo size in the css
Hello Geno. I’m having trouble. My secondary logo doesn’t appear.
Hi Andrew! Were you able to figure out what was going on? If not, give me the link and I’ll take a look at it for you.
Hi, I didn’t. I’ve taken it off my site for now but I’ll put it back in and send the link soon. Could it be to do with that it’s a wordpress ‘multisite’ site?
Here’s the link… http://andrewdavidjones.co.uk/v2/
It looks to me like the CSS code is in the wrong place, in the header.php file instead of the style.css file. I’m referring to the following block of code.
If that is in your header.php file, remove it and place it in the style.css file instead.
Hi, unfortunately that’s not the case. The code is in the custom css section in Divi’s Theme Options.
Although, it might be worth noting, I haven’t edited the php file directly, I’ve used Divi’s in-built ‘Add code to the of your blog’ function. Is that wrong?
Ok, that is definitely a problem. The code from the tutorial needs to be placed in the header.php file. If you are not already, you should set this up on a child theme so that you can modify the file without worrying about future updates to Divi. It is not advisable to modify Divi’s header.php.
Here is a tutorial for creating a child theme: https://quiroz.co/5-easy-steps-to-creating-a-child-theme/
Thanks. I have a child theme. I’ve created a header.php for it, inserted the code, still the same. The code shows up when I use “Inspector” in firefox but the 2nd logo doesn’t show up on scroll. Just makes the original disappear.
Any other ideas? Have you guys ever used it with a multi-site? Could that be the case?
I don’t know if it had been tested on multisite before, so I tried it right now and got it to work.
I’m still convinced it is a problem with the code added to the header.php file. I was able to get it working on your site by cleaning up and moving some of the code around using Chrome’s dev tools.
The 2nd logo code is currently within the head tag. It needs to be further down, immediately after the logo code that already exists in the header.php file. Search for id=”logo” to find it.
Here is what the existing code on your site looks like…
And here is what it should look like…
Hey Jerry, thanks so much for your help. That did it!
I originally just pasted it in anywhere in the header.php not realising it had to be in a specific section.
Thanks again!
nice one! Thanks for that 🙂
Hey Geno,
I recently added this awesome code to my site and it works great! I did notice one thing though. The #logo2 is visible underneath my main logo on mobile devices. I have tried this code:
@media only screen and ( max-width: 746px; ) {
#logo2 { display: none !important; }
}
yet it does nothing. If you have any ideas for a fix I would be super appreciative!
Hi Grant! That is not something we have seen before. Can you provide the link to your site so we can check it out?
Hello Geno. Thanks for sharing all of this. I learned a lot with your post.
The problem that I had was that o DIVI 2.7 the css in my child style sheet wasn’t overriding the original sheet for most of the menu items (and header) for mobile styles. I downgraded to 2.4 were it works fine, but the Divi-Jquery-wordpress update problem with made me go back to 2.7.8 because I did not wanted to downgrade jquery also. well.
The solution was to backup the divi stylesheet and add the code directly in the original theme stylesheet.
I dont know much why this could happend. Just starting to work with childthemes.
Hi Leandro! Glad you are enjoying the tutorials! You have an interesting situation there, you shouldn’t have to modify the divi stylesheet for these to work. You might want to check the setup of your child theme. If nothing in the child theme’s style.css file is working on the site, then something is wrong with the setup. If some of the child theme’s style.css code works, then it is often a case of conflicting code. You might be able to get it to work by adding some !important tags.
Another option is to add the CSS to the Custom CSS box on Divi’s Theme Options page. That is much preferred over modifying Divi’s stylesheet.
Hi jerry, thanks a lot for your answer.
Some css worked, and some not. And also when I downgrade to divi 2.4 the menu worked without changing the child stylesheet.
Well. the point is that I took your advise, and added the code to the custom css box and worked exelent.
Now I have the Divi theme intact. Thanks
(I was avoiding that box for being to smal,and I like to have all css in one place, but just know I see that that box is resizable… ups).
Hi gene,
This is such a great tut,
Ive combined it with this post on the divi support forums, https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=579519&p=3199186&hilit=move+logo+on+scroll#p3199186 to swap from a entered logo to a smaller left aligned logo on scroll, but my problem is now the header height is too much for the smaller logo.
I tried adjusting the fixed-header nah-height but that left the menu links floating below the actual header.
Any tips on how to make this work for my situation?
Hi Nick! It’s hard to say exactly without looking at it, but I’d start with the following line of CSS code…
That will move the menu up a bit…you can adjust the -15px to find a value that works good for you.
Hi, I am having a problem with displaying logo2.
The logo2 comes enlarged, out of alignment and only for a fraction of a second and then disappears. I don’t know what’s causing this to happen. The logo comes right in the middle of the screen and then vanishes. Kindly help me with this.
We can take a look at it if you provide a link for us to see this
Hi Geno, love your stuff,
youve been very helpful
the swap isnt happening for me tho, the first logo isnt going, it just comes above the new logo.
I am using the centered inline logo header, maybe thats why
Hi Rohit! Yeah, this tutorial is not designed to work with the centered inline logo. It is probably possible, but we haven’t worked out the code for that yet.
Working off of localhost, so unfortunately I don’t have a link to share so you can see this live. BUT… we got the logos to swap fine on scroll, however, logo2 is no longer centered inline. Main logo is 243×60 (right now, but we’d like to make it larger) and logo2 is 67×60.
Goal is to have logos remain somewhat similar in size even on scroll (so, if we increase logo1, we need to increase
logo 2 slightly as well, correct? So that max height remains the same?) Note: we did attempt to use CSS to moderate max height and that had issues of its own.
We are working with a child theme. What do I need to do to fix it so that logo2 is also centered inline?
Hello Stephanne! As you have discovered, this tutorial was not designed to be used for the centered inline logo. You will need to work out some additional CSS to adjust the size of the logos. Here is a little snippet to get you started though…
With the centered inline logo, you can control the size more effectively by adjusting the logo container instead of the the logo element directly.
hi,
The replacement logo is too huge.
how do i modify it?
please have a look.
http://www.dhavalgroup.in
Hi Rohit! It looks like you switched over to a different style header. If you still want to use this tutorial, switch it back and let us know, we’ll work up the CSS to reduce the logo size for you.
Just used this on a very minimalistic design to swap out a large logo for a small home icon. Works great!
Thank you guys!
Very cool. Glad it worked out and thanks for taking the time to leave us the feedback. I really appreciate it 🙂
Like Bruce posted before I want logo1 to logo2 transition to be only on the home page and logo2 to be on all other pages. I am using this tutorial with an overlapping logo and I just cant get this to work the way I want. I tried it with the “different Logo” tutorial but its not working for me. Love the tutorials here and they are well written even for a novice like me but this one has me stumped.
The site I am working on is http://randyearles.com/home/ and http://randyearles.com/home/index.php/sample-page/ has the logo I want to use on all pages but home. Please, any advice or solutions is greatly appreciated!
Hi Randy! I see what is going on. You are on target for showing logo2 on the other pages. However, that CSS is placed after the CSS from this tutorial to change the logo on scroll. That is overriding the tutorial code and preventing the change. You can resolve this by removing that whole block of code above the tutorial code. Here is what the end result looks like…
Hi Jerry, PERFECT solution, worked great after your suggestion! Thank you again for the help and fast response.
Hi There,
Logo 2 loads some pixels below Logo 1. It produces a slight “jump” effect on scroll. My menu links transition on the same “line” if you will, and I’m looking for the Logo transition to do the same.
This is my site:
http://www.ikydstudio.com/DavidStoltz/
To do that you would have to make sure the main header is the same height as the fixed header. Try adjusting the fixed header height and the main header height in the customizer settings so that they are both equal.
Hi Geno, is it possible to improve the transition from logo1 to logo2? I would like to let it fade with ease.
This tutorial uses a different approach and it has some pretty cool animations. But you have to tweak it for your website.
https://quiroz.co/swap-horizontal-logo-with-vertical-logo-on-scroll/
Thanks so much for your tutorial! However, there seems to be a problem in loading the second logo. In the home page it works great, but the other pages doesn’t seem to be able to find the image. Any ideas?
Unfortunately, I cannot share the link, as I use a local server.
I am not sure. Are you enabling the fixed header?
awesome tutorial, thanks a lot Geno, i have just a question, if i want the logo to change on a mouse over instead of on scroll, how can i achieve this?? would you mind to share the css pretty please??
This is a pretty good request. Unfortunately I do not have this handy but I will keep it in mind for a future tutorial.
I implemented the steps in this tutorial, and it looks great on desktop however on mobile, the logo2 overlaps the primary navigation. Is it possible to disable the logo change on mobile?
It is most likely because your menu is too long/wide and creating a second line when the screen size gets to a certain width. When the menu creates a second rollover line it increases the menu height. And since the logo size is based on a percentage of the menu height, it also doubles in size. The solution is reducing the menu width. You can make the menu container fullwidth at the point where the menu rolls over into a second line. Just add this and change the max width the the point where your menu doubles into a second line.
Or here is another alternative https://quiroz.co/initiate-mobile-menu-button-sooner/
Really love the logo swap, now also work great on this training site: https://www.symbisionacademy.eu/ So thank you!
One question, if you have the time. Some users mentioned that the bars of the slide-nav (in the top right) is not clearly a menu.
Any idea how I could add the Word “Menu” to before or after it (like the mobile menu does)?
I tried adding “content:’Menu’;” in several places, but to no avail. Hope you might have a suggestion.
Looks like you figured it out. It looks great 🙂
Geno, I used this solution on a couple of websites, but I wasn’t happy with the header.php part. I don’t like child themes, and I wasn’t able to insert the string on this particular place with a plugin. So I found a work-around with pure CSS:
.et-fixed-header #logo {
display:none;
}
#main-header.et-fixed-header .logo_container {
background-image: url(https://www.yourwebsite/assets/yourimage.png);
background-repeat: no-repeat;
background-position: center center;
}
This is for a centered logo, you can see it here: https://www.zelfkennis.nu
cheers!
Hi Geno, thank you for this tutorial it worked great on the desktop. The only issue I have now is getting it to work on portable devices particularly the phones. During scroll, the second logo has a blinking/staggering look to it. Can this have a smoother transition or maybe disable this feature on portable devices?
Yes you can disable it by wrapping it in a media query. Wrap all the css in between the brackets of this media query.
Great Work done
Thanks Walayat
I implemented this code and for some reason I’m seeing both logos on both headers. I’m using a child them and didn’t modify anything other than the logo url. Any ideas?
Sounds like the css is not rendering. Make sure to clear all cache (browser, plugins and server cache)
Hi Geno, thanks for the tutorial. Is there some CSS magic to smoothen out the transition between logo1 and logo2? Thanks.
Hi Dirk. Take a look at the transition I did on this tutorial. Same concept but instead I have the logos slide in and out with a little css. https://quiroz.co/swap-horizontal-logo-with-vertical-logo-on-scroll/
Thanks Geno. I tried the smooth transition tutorial, but I ended up with two logos displaying and no transition… I changed the header.php and the style.css on the child theme as per the instructions in the tutorial but no joy. It looked fine on the previous try, but this time around it doesn’t work. URL: http://continentalrestaurant.co.za/ Any ideas?
Hi Dirk, Either you figured it out or it was a caching issue. Make sure you clear your browser cache, plugin cache and server cache. I can see it working on my end although you still have to make some adjustments to the second logo margin. Try changing the top margin on this existing line of code.
Hi Geno, thanks for the feedback. I cleared the cache and it seems to have helped, but the transitions are not working – logo1 moves down and logo2 appears and hangs in the middle of the page. I just changed the margin-top as you suggested and increased the logo container width to 300px so that logo1 displays larger than logo 2. Please let me know what you suggest. Thanks again for the assistance. I owe you a coffee!
YOu will have to adjust the margin settings until you get it right where you want it.
Hi Geno, it was a caching issue and it’s almost there. Just can’t seem to sort out the position of the logos and the way logo2 slides in from the bottom, not the left that I can’t seem to get right. I played around with the top margins and max heights but no change. Any suggestions? Thanks.
Unfortunately I do not have the time to get in there and customize it for you at the moment. You would just have to keep playing with the margins until you get it right where you want it.
Would I be right in thinking this trick doesn’t work in the current version of Divi? The demo logo is remaining the same when scrolling?
Thanks in advance for your response!
This is not working for me, and it may be because I have my nav on the bottom of the full width header section then it locks to the top once the user scrolls.
Yeah that will probably require a different approach.