In this article I will share the steps to change logo on hover in Divi theme.
This article is specifically about the logo in the default header of the theme. The steps might not work for the menu module or a header created with theme builder.
By default there are no options in the Divi theme to change the logo on hover in the header. However the logo can be changed with a small snippet of code.
Add Code to Change Logo on Hover in Theme Options
To change the logo on hover you have to add the code below in theme options.
Go to your Dashboard > Divi > Theme Options > Integration > Add code to the <head> of your blog and then add the code.
<script>
(function($) {
let $hover_logo = "hover logo here"; //add the link to the hover logo here
let $default_logo = "default logo here"; //add the link to the default logo here
$("header img#logo").hover(function() {
$(this).attr("src", $hover_logo);
}, function() {
$(this).attr("src", $default_logo);
});
}
)(jQuery);
</script>
You have to replace the text hover logo here in the code with the link to the image that you want to show on hover. And the default logo here text with the default logo link.
You have to add the link between the inverted commas. For example if the link to the hover logo was www.learnhowwp.com/hover-logo.jpg then the fourth line would be
let $hover_logo = "www.learnhowwp.com/hover-logo.jpg"; //add the link to the hover logo here
If you are not sure where to exactly add the code in the theme options then here is a screenshot to help you.
That’s it. That is all you need to know to be able to change the logo on hover in the Divi theme header.
Here are some other Divi tutorials that you might want to check.
- Add a History Back Button in Divi Theme
- Remove Links on Portfolio Module in Divi Theme
- How to Move Blurb Icon to Right in Divi Theme
Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.
I did what you suggested and no luck. Any ideas?
Here is the code I used:
(function($) {
let $hover_logo = “https://client.jakemore.com/wp-content/uploads/2021/11/PostModsLogo2.png”; //add the link to the hover logo here
let $default_logo = “https://client.jakemore.com/wp-content/uploads/2021/11/PostModsLogo1.png”; //add the link to the default logo here
$(“header img#logo”).hover(function() {
$(this).attr(“src”, $hover_logo);
}, function() {
$(this).attr(“src”, $default_logo);
});
}
)(jQuery);
Here is the site: https://client.jakemore.com. (sandbox site for now)
any insight is appreciated. Thx