Divi logo size & how to customize

“Can you make my Divi logo bigger?” is one of those things a web designer never wants to hear from their client, but in case you actually do need to make your logo larger than its default 93×43 pixels size, then making that and other customizations are easy to do with the Divi Theme Customizer.

What is the default Divi logo size?

The default Divi logo PNG dimensions are 93 pixels x 43 pixels and you can change the size of the logo in Divi’s theme customizer.

You will find a Photoshop PSD file and a logo_blank PNG file for the Divi logo in the Divi theme download zip files in your Elegant Themes dashboard. These are the default logo size of 93 by 43 pixels. Unzip the Divi Theme files and it will be in Divi > PSD.

Alternatively, you can right-click on the logo below and click on Save As to download the logo PNG file. You can then edit this file to your own logo at the correct logo size.

Steps to upload your own logo to Divi

When you create a new Divi site one of the 1st things you will want to do is to remove the default Divi logo and replace it with your own. To do this you will need to upload your logo image in the Divi Theme Options settings.

1. In your WordPress dashboard menu click on Divi > Theme Options
2. In the Theme Options > General > General tab right at the top, you will see the Logo field.
3. Click on the Upload Image button to select and upload your logo image into your media library.
4. Click on Set As Logo and your logo URL will be added to the option field
5. Clicking the Reset button will remove your logo and replace it with the default Divi logo

Change the Divi logo size using the Theme Customizer

You can edit the logo max height and menu height in the Theme Customizer to change the size of your logo and adjust how much white space it sits within the menu bar itself.

For the Primary Menu Bar, you can set the Divi logo max height in the theme customizer between 30 to 100 pixels with the default set at 54 pixels. You can set the menu height in the Theme Customizer between 30 to 300 pixels with the default set at 66.

For the Fixed Navigation Settings menu bar, you can set the menu height in the Theme Customizer between 30 to 300 pixels with the default set at 40.

What are the 5 Divi logo placement options?

In your Theme Customizer, you can choose between 5 different header styles that will result in your logo being placed in 1 of 4 different locations in the header.

If you open your Theme Customizer and navigate to Header & Navigation > Header Format you can choose between Default, Centered, Centered Inline Logo, Slide In, and Full-Screen options.

Default header style logo placement is on the left-hand side of the main header

Centered header style logo placement is above the header menu items

Centered inline header style logo placement is aligned in the center of the header menu items

Full Screen & Slide-In header style logo placement for both is in the left-hand side of the Main header

Customize the logo using the Theme Customizer

Once you have uploaded your logo into Divi there are more options within the Divi Theme customizer to edit the placement, size, and visibility of your logo in the fixed and primary navigation menus.

Primary Menu Bar – Your primary menu bar settings control the way your header menu looks before you scroll the page.

Fixed Navigation Settings -Your Fixed navigation settings control the way your header menu looks after you scroll the page. The fixed navigation bar is enabled by default in Divi which means that it will stick to the top of the page when the user scrolls the page. You can turn off this fixed navigation option by going to Theme Options > General > General tab and disabling Fixed Navigation Bar.

Stop logo shrinking after scroll

You will note that the menu height is smaller in the Fixed Navigation Bar settings than it is in the Primary Menu Bar settings which will cause the menu (and logo) to shrink as the page is scrolled by default.

To stop the menu (and logo) from shrinking after you scroll you need to make sure that the Fixed Navigation Settings and Primary Menu Bar menu height are set to the same number.

Hide logo before or after scroll

To hide your logo before scrolling you will need to go to the Theme Customizer > Header & Navigation > Primary Menu Bar and select the checkbox to Hide Logo Image. 

To hide your logo after scrolling you will need to go to the Theme Customizer > Header & Navigation > Fixed Navigation Settings and select the checkbox to Hide Logo Image.

This option is particularly useful if you are using the centered header style to ensure that your header does not take up too much screen space once the user has begun to scroll down to your content. Your logo is never more important than your content, but remember that if you remove the logo you need to make sure that you have a link to the home page in the text navigation.

Make your Divi logo overlap the menu

I always like to use a square or landscape orientation logo as it fits much better into a slim header menu bar. But, If you have a logo with a portrait orientation that can’t be edited into a landscape one, you may want to consider overlapping the logo over the bottom of the menu bar so it is not squashed into an illegible tiny logo within the set height of the menu bar.

To make your vertical logo overlap the menu bar add the following CSS code into Divi > Theme Options > Custom CSS

@media only screen and (max-width: 980px) {
#logo {
min-height: 100px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}

Swap the Divi logo as the page is scrolled

We can use some custom CSS to switch the Divi logo image when your users scroll down the page and activate the Fixed Navigation bar. To switch the Divi logo set in the Theme Options for a new logo image you will need to;

1. Create your 2nd logo image and upload it via the WordPress dashboard under Media > Add New
2. Once uploaded, click on Media > library, click on the logo and copy the URL location
3. add the following CSS code into Divi > Theme Options > Custom CSS
4. Replace the INSERT SWAP LOGO IMAGE URL HERE with the URL you copied in step 3

 
.et-fixed-header #logo { content: url(INSERT SWAP LOGO IMAGE URL HERE); } 

*This updated post was 1st published on January 14, 2015