Change the Divi Logo Link

This post may contain referral links which may earn a commission for this site

By default, the Divi Theme logo links back to the homepage. But this can easily be changed with the following jQuery snippet:

jQuery(function($){
    $('.logo_container a').attr('href','https://www.google.com');
});

Just change https://www.google.com to your desired URL. See here for details on how to add jQuery code to Divi.

This feature is available in Divi Booster 2.0.1 onwards, under "Header > Main" on the Divi Booster settings page.

Hundreds of new features for Divi
in one easy-to-use plugin

26 Comments

  1. Dan,
    Can we use this setting to effectively remove the link.
    Or perhaps to link to the top of each page.
    I have tried adding # hoping this would be seen as an anchor to the top of the page but it doesn't work and actually targets about:blank … the page going white i.e. broken link.
    Is it possible with this function?
    Thanks Mark

    Reply
    • Hey Mark, there are a few things that can be used to link back to the top of the page, but they pretty much all have some circumstances where they don't work. This stack overflow post has a decent round up:

      https://stackoverflow.com/questions/8174282/link-to-reload-current-page

      If you want to completely remove the link (making the logo non-clickable), this should work:

      jQuery(function($){
          $('.logo_container a').removeAttr('href');
      });
      

      It removes the href attribute, effectively disabling the link. Hope that helps.

      Reply
      • Hi Dan,

        Thanks for letting me know.
        I tried this custom CSS which works for the non-clickable option:

        .logo_container a {pointer-events: none;}

        Would you have a preference on method – Just for my information and best practice for your readers πŸ˜‰

        Thanks for your help

        Regards Mark

        Reply
        • You're welcome, Mark.

          In theory, the best practice would be to strip the link on the server so that it is never sent to the browser. But Divi pretty much hard-codes the link in the HTML which makes it hard to remove without capturing and parsing the HTML page before sending it (which is a bit messy and inefficient).

          So in this case, disabling the link in the browser is probably the better option. Generally a CSS solution is preferable to JavaScript / jQuery one (as applies right away rather than once the page has fully loaded, doesn't require the browser to execute code, and isn't affected by JavaScript errors elsewhere in the page). I normally use a variant of your CSS, i.e:

          .logo_container a {
          pointer-events: none;
          cursor: default;
          }

          Which includes a change to the cursor to stop the link looking clickable. This may be good enough for some applications and when it is, it's what I'll use. However, it doesn't work in IE 10 and earlier. To support these browsers, I'd probably use the CSS, and then add the jQuery method for removing the href as a backup. That way you get the best of both worlds – good coverage, and instant disabling of the link in supporting browsers.

          I hope that all makes sense πŸ™‚

          Reply
    • Yes! It works very well with this function.

      You need to:
      – set an anchor in the top element of the page (or wherever you want)
      – make minor changes to the link in Dan's code:

      'https://www.google.com' –> 'http:#anchor'

      Thanks Dan, that function's great!

      Reply
      • Thanks for the suggestion, Tifi!

        Reply
  2. Hi. This setting for me is in a Divi Booster section that is grayed out and inactive. How do I get that part of Divi Booster working?

    Reply
    • Nevermind, figured it out πŸ˜‰

      Reply
      • Great! I'm glad you figured it out, Jeff πŸ™‚

        Reply
  3. how can I change my site logo? when I install the DIVI theme, there is DIVI's official logo. please tell me the way how can I add my own logo? thanks in advance πŸ™‚

    Reply
    • Hey raja, from your WordPress Dashboard, go to "Divi > Theme Options". On the "General" tab (which should be shown by default) you should see a "Logo" option (it'll probably the first option). You can enter the URL for your logo here, or click "Upload" to select / upload one. Then scroll down the bottom of the page, click "Save Changes" and your new logo should be applied. Hope that helps!

      Reply
      • Thanks for valuable information Mr Dan, Even I too Face a lot of issues with setting a custom logo in Divi theme options. But now when I insert a logo link diva theme accepted my logo.
        Now it's visible After seeing your comment regards how to put logo.

        Reply
      • hello i am having an issue where the upload button doesn't work how can i get around this?

        Reply
        • Hey gabriel. I'm not sure what would be causing that, but if you're willing to send me login details (via the contact form), I'll see if I can figure out what's going on. Thanks!

          Reply
  4. dan you are the man!
    thanxs a lot!
    all of your code is very helpfull!

    Reply
  5. This did not work for me either? I just want to disable the link when you click on the logo. Thanks!

    Reply
    • I found my problem, this isn't in booster just divi>integrations and needs to be surrounded by xyz

      Reply
      • Okay, great. I'm glad you were able to figure it out, Beth!

        Reply
  6. Yeah, this is not working for me whatsoever.

    Reply
    • Sorry to hear that MWW. Any chance you're able to send me a link to the site you're working on so that I can take a look?

      Reply
      • Hmm, doesn’t work for me neither. Neither the snippet described here nor the same function within Divi Booster …
        πŸ™
        What’s wrong here?

        Reply
        • Hey Christoph, I've just checked and the feature itself still seems to be working. Any chance you're able to send me a link to the site you're working on? One possible cause would be a JavaScript error somewhere on the page which prevents the logo link code from running. Another would be a caching issue where an old version of the page (generated prior to the code being added) is being displayed.

          Reply
      • How do you link to a new external page ? Possibly with custom window size.

        Reply
        • Hi Tony, you should be able to do it with something link this:

          jQuery(function($){
              $('.logo_container a').attr('href','#');
              $('.logo_container a').click(function(){
                  window.open('http://www.google.com', '', 
                  'toolbar=yes,resizable=yes,scrollbars=yes,width=500,height=500,left=0,top=0');
              });
          });
          

          That will open Google in a 500×500 popup window when the logo is clicked.

          Reply

Submit a Comment

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