How to Change Logo on Hover in Divi Theme

Jul 10, 2021 | Blog, Divi Tutorial | 0 comments

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.

0 Comments

Submit a Comment

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

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month