Updating the link URL of your Divi site's logo allows you to direct visitors to a destination of your choice when they click the logo, instead of the default homepage. This can be especially useful for branding, directing users to landing pages, or meeting specific navigation requirements. In this guide we show you how to change the Divi logo's link URL to a custom destination.
Change the Divi Logo Link URL using Divi Booster
This method shows you how to change the Divi theme logo's link URL using the dedicated option in the Divi Booster plugin's Header settings. It's a straightforward approach that lets you set a custom destination for your logo without needing to edit any code or theme files.
Access the Divi Booster Header Settings
In your WordPress dashboard, expand the 'Divi' menu in the sidebar and click on 'Divi Booster'. On the Divi Booster settings page, expand the 'Header' section, then the 'Main Header' section.
Set and Save Your Custom Logo Link URL
Scroll down until you find the option labeled 'Change logo link URL to'. Check the box to enable the 'Change logo link URL to' setting. Then, enter your desired destination URL (for example, 'https://example.com/custom-logo-destination') into the provided field. When you're done, click the 'Save Changes' button in the top right corner of the settings panel.
Verify the New Logo Link
Visit your site's homepage and click on your logo in the header. Confirm that it now takes you to the custom URL you entered.
Change the Divi Logo Link URL using jQuery
Alternatively, you can change the Divi logo's link URL to a custom destination by adding a jQuery snippet to Divi's Theme Options. This is handy if you prefer a code-based approach.
Add the jQuery Script in Divi Theme Options
Go to the 'Divi' menu and choose 'Theme Options'. Open the 'Integrations' tab, and in the 'Add code to the of your blog' section, paste the following script:
<script>
jQuery(function($){
$('.logo_container a').attr('href','https://example.com/custom-logo-destination');
});
</script>
Save and Check
Click the 'Save Changes' button to save your updates. Then, visit your site's homepage and check your logo. It should now link to your chosen destination URL.
Conclusion
Changing the Divi logo link URL is easy with either Divi Booster's settings or a simple script in Theme Options. Pick the method that best suits your workflow, and direct visitors wherever you need with a single click on your site's logo.
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.