🎁 Don't miss Divi's Anniversary Sale! Get up to 70% off Get Deal

How to Change Logo on Hover in Divi Theme

Blog, Divi Tutorial | 1 comment

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.

Divi theme options integration tab javascript code

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.

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.

1 Comment

  1. jake

    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

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Check out this Amazing Divi Plugin Bundle

Save 25% by Purchasing the Bundle instead of Each Plugin Individually.

Learn More!

Divi Hosting Recommended By Elegant Themes

Get Started From Just $1.99 Per Month