Changing the default Divi logo in the header navigation is one of the first steps you're definitely going to do when you install the Divi theme on your WordPress website and start customizing it.
When designing the overall look of your website and trying to make it as professional as possible, it's very crucial that you come up with an idea for the website's logo which needs to be meaningful and matches your brand at the same time.
Focusing on every aspect of your website no matter how small it's will absolutely make it stand out from the crowd and maintain its social presence.
But in general, inventing a new idea or changing things the right way is not as easy as it sounds. Therefore, we've written this article to help you with every detail as well as walking you through the process of changing the Divi header logo.
If you're excited as I am ….
Then let's get started right away (:
Things To Know
As We do in our similar previous posts related to Divi tutorials, we're going to start by mentioning some important points about creating your first website logo and introduce some great tips that we usually follow to get a good result.
1 – What are Divi Logo dimensions?
The default Divi header logo size or dimensions are 93 x 43 pixels and the image is in PNG format. Now, you might be wondering what's the best size for a logo when using the Divi theme?
well, the best size or dimensions to choose when uploading the Divi navigation header logo is 250 x 45 pixels or 250 x 55 pixels because doing so will ensure it has enough white space around as a result make it look crisper.
2 – Tips for a perfect Divi Header Logo
Here are some tips and guidelines to help you come up with a perfect header logo for your Divi website:
1 – Make it simple: if you have some experience in graphic design, you probably know the “KISS” rule which means “make it simple stupid”. Always make your logo as simple as you can don't try to stack elements with no idea in mind.
2 – Make it match: before you create a website design you choose the main colors, those need to be used in the logo as well as the fonts.
3 – Make it meaningful: this is a valid rule in case you used meaningful words in your domain name. for example if your domain is: “travelparrot.com” then the logo can be a symbol of a parrot with a compass or something like that. hope this makes sense!
if you have chosen a broad domain name like mine then make sure to use a symbol related to the niche your targeting or use the letter-type logos (just the domain name in a stylish font and use the website's main colors).
Now that you've some instructions in mind, let's see different options to get a logo designed.
3 – Design a Logo for your Divi website
Here are some options to get a great logo design for your website:
1 – Create it yourself: if you're a graphic designer or have some experience in designing logos with popular software such as Adobe Photoshop or Illustrator then, I think the process of creating a logo is a piece of cake as you'll have the chance to play around with colors and fonts and come up with something unique.
2 – Use free logo generators: Now, you don't want to deal with complicated design software then one of the freeways is to use Canva, Turbo logo, freelogodesign.org to instantly generate a logo based on your website name, edit the colors, the fonts and download it.
3 – Hire a graphic designer: If you're one of those who like to invest a few bucks in hiring a graphic designer and save time then you can find some skilled logo designers on freelancing websites like Fiverr.
Now if you're running a website for a business and you want to get a premium logo from the PRO logo designers on Fiverr then check Fiverr Pro, it's way better!
that's it for the things to know about designing a logo.
let's continue to the actionable step by step guide.
Customize & Change The Divi Logo [Easy Guide]
Here we are on the practical side of this tutorial in which we'll walk you through exactly how to change the default Divi logo after having one designed. Ready?
let's GO (:
1 – How to Change the Divi Header Logo?
To change and replace the default Divi logo in the navigation header, follow these steps:
1 – Log in to your WordPress Admin dashboard by going to yourdomain/wp-admin then entering your username and password.
2 – In the left-hand side menu, hover over “Divi” tab and choose “theme options”
3 – In the theme options, select the “General” tab then click the “Upload” button then choose your own logo either from the media library if you already uploaded it, or click the “choose files” button to upload the logo from your computer.
4 – On the top left corner click “save changes”.
Congratulations 😉!
Let's see some of the customizations we can do for our added logo.
2 – Change the Divi Logo size
Perhaps, one of the first things you will be looking at is how to increase the Divi logo size because the default one is a little bit small.
Change Divi logo height on desktop
To change the logo size (height) in the Divi theme, follow these steps:
1 – Login in to your WordPress dashboard the go to Apperance > customize
Alternatively, You can go to Divi > Theme customizer
3 – From the customizations menu, select “Header & Navigation”
4 – Now, choose “Primary Menu Bar”
5 – You'll see a list of customizations that control the logo on the desktop devices.
From here you can play around with the options but the two thing we're explaining about in this tutorial are:
- Menu height: this option changes the height of the whole navigation header
- Logo Max Height: this option controls the height of the logo itself
Increase divi logo size on mobile
Since when you change the logo size on desktop it doesn't take effect on the other devices.
Here are the simple steps to change the divi logo size on mobile and tablet devices:
1 – Go to Divi > Theme options > CSS then paste the following CSS code snippet:
/** change logo height on mobile and tablet **/
@media (max-width: 980px) {
#logo {
max-height: 80% !important;
}}Then you can increase the value of “max-height” property until you reach the result you want and don't forget to click “save changes” button in the top left corner in order for the changes to be applied.
3 – Prevent Divi Logo from shrinking after scroll
Another thing most people don't like is the fact that the header shrinks once you start scrolling down causing the Divi logo to shrink as well and become very small but don't worry we can control that as well.
Here is How to stop Divi logo from shrinking on scroll using Theme customizer:
1 – Go to Divi > Theme Customizer > Header & Navigation > Fixed Navigation
2 – Now the trick is to set the “Fixed Menu Height” value to the same one you have used in the menu height settings, which means that the height will remain the same before and on scroll. hope this was clear!
For some reason some people are asking how to they can hide the logo of their website in the mobile only.
Well, to Hide the Logo from Divi Mobile Navigation Header follow these steps:
1 – As usual login in to the WordPress dashboard then hover over “Divi” then choose “theme customizer”
2 – From the customizations list in the left-hand side select “Mobile Styles”
3 – From the three options that will be given, choose the last one saying “Mobile Menu”
4 – Now, put a check mark on “Hide logo image” and the logo will be hidden in the mobile screen.
5 – Change the Divi Logo Link
I don't know what would you need this but we need to mention it since many people are struggling with it.
By default the link of the Divi logo is pointing to the homepage. but you still can change it.
Here's how to change the Divi logo link :
1 – Go to Divi > Theme options > Integration and add the JQuery code below
<script>
// change the destination link of logo
jQuery(function($){
$('.logo_container a').attr('href','insert your URL here');
});
</script>as you see in the screenshot below
After doing the previous step, scroll up and click “save changes” green button on the top left hand-side.
You're all set!
Further Reading:
- How to Hide or Remove Divi Sidebar?
- How to Edit Divi Theme Footer [Easy Guide]
- Divi Fonts Guide: Add Custom Fonts & Google Fonts
- Divi Favicon: How to Add it & What to know
Roundup
Having a unique logo for your business website is an essential part among the parts of establishing a strong brand on the internet, people will recognize you instantly when they see your logo somewhere.
If you still didn't design a professional one yet then think twice and take action, it's very easy to be created and believe me you'll know its benefits when your business becomes well-known in the market you're targeting.
If you have any other questions drop them in the comment section below. Otherwise, let me know what benefits can someone gain if he has taken time to invent a good-looking logo?
cheers!
