By default, the Divi Theme logo links back to the homepage. If you'd like to instead have the Divi logo link to a different location, here's how to change it.
Change the Divi Logo Link using Divi Booster
Divi Booster includes an option for changing the Divi logo link. You'll find it in the Divi Booster settings page at:
Divi > Divi Booster > Header > Main Header > Change logo link URL to…
Like so:
To enable the feature, check the box next to it and enter the URL you'd like your logo to link to, like so:
This feature is available in Divi Booster 2.0.1 onwards.
Change the Divi Logo Link using jQuery
The logo link can be can also be changed by adding the following jQuery to your site:
jQuery(function($){
$('.logo_container a').attr('href','https://www.google.com');
});Related Post: Adding JavaScript / jQuery to Divi.
Just change https://www.google.com to your desired URL. See here for details on how to add jQuery code to Divi.
Change the Divi Logo Link in a Custom Header
The sections above apply to the logo in the default Divi header. If you are using a custom header built in the Divi Theme Builder, then your logo is most likely added using an image module. In that case, you can add / change the location your logo links to by entering target URL in the image module settings at:
Image Settings > Content > Link > Image Link URL
Like so:
I tried this on my site https://theactiontech.com/ but couldn't make it yet. can you please have a look and let me know what is wrong that i am doing?
Hey Web dev, it looks like your logo is added using an image module in your Theme Builder custom header. So to change the logo link URL, you'd need to follow the advice in this section "Change the Divi Logo Link in a Custom Header" of the post (instead of the other sections). If you've done that, clear any caches on your site. Hopefully that will get the new logo link in place, but let me know if you're still having problems after that. Thanks!
I have tried everything to get the logo to link back to the homepage, but nothing has worked. Is there default code for the homepage.php that I can insert? As of now, it is not recognized as a link, just a logo. I have added snippets to the header and body through the Divi tool, with no change.
Hey David, on the site linked in your comment I can see you're using an image module in a custom theme builder header. The instructions in the post were designed for the logo in the default header and won't work on the image module. In your case the best approach will probably be to set the URL in the image module settings. I've added a section to the end of the post explaining how to do that. I hope it helps!
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
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.
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
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 :)
Thank you so much this worked
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!
Thanks for the suggestion, Tifi!
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?
Nevermind, figured it out ;-)
Great! I'm glad you figured it out, Jeff :)
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 :)
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!
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.
hello i am having an issue where the upload button doesn't work how can i get around this?
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!
dan you are the man!
thanxs a lot!
all of your code is very helpfull!
This did not work for me either? I just want to disable the link when you click on the logo. Thanks!
I found my problem, this isn't in booster just divi>integrations and needs to be surrounded by xyz
Okay, great. I'm glad you were able to figure it out, Beth!
Yeah, this is not working for me whatsoever.
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?
Hmm, doesn’t work for me neither. Neither the snippet described here nor the same function within Divi Booster …
:-(
What’s wrong here?
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.
Where should we put this snippet?
Hey RM, this post explains how to add jQuery code (which the above code is) to Divi:
https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/
How do you link to a new external page ? Possibly with custom window size.
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.