Divi logo size & customization guide

The Divi logo is added to every page of your website by default inside the header and can be customized to change the size, appearance, and location.

• You can add a new logo via the WordPress dashboard > Divi > Theme Options > General > General tab > Logo
• You can customize the logo size and placement via the Theme Customizer
• The default Divi logo PNG dimensions are 93 pixels x 43 pixels

This guide will cover the following topics related to the Divi header;

• The Divi logo size & filetypes
• How to add your logo to Divi
• How to add an SVG logo
• How to change the logo size using the Theme Customizer
• How to set the logo placement
• How to customize the logo using the Theme Customizer
• How to stop the logo from shrinking when scrolling
• How to hide the logo before or after scrolling
• How to make the logo overlap the menu
• How to swap the logo image on the scroll
• How to change the mobile logo size

What is the default Divi logo size?

The default Divi logo size is 93 pixels x 43 pixels, and you can change the dimensions in the Divi Theme Customizer with a range between 30 and 100 pixels.

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 pixels for the logo height and 43 pixels for the logo width. 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 edit this file to your logo at the correct logo size.

Where and how to add your logo to Divi

When you create a new Divi site, one of the 1st things you will want to do is remove the default Divi logo and replace it with your own.

You can upload your logo image in the Divi Theme Options settings.

1. In your WordPress dashboard menu click on Divi > Theme Options
2. You will see the Logo field in the Theme Options > General > General tab at the top.
3. Click 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

How to add a Divi SVG logo

An SVG logo (or Scalable Vector Graphic) is a scalable, vector-based image format.

By default, you can’t use an SVG logo in Divi or WordPress, but installing the SVG Support plugin will allow it.

Once you have installed the plugin, you can upload your SVG logo and set it in the Theme Options as in the steps mentioned above.

Change the Divi logo sizing using the Theme Customizer

Once you have uploaded your logo to Divi via the Theme Options, you can further customize it using the Theme Customizer. To access the Theme Customizer, you must navigate to the WordPress dashboard > Appearance > Customize, and the Customizer window will open.

There are options to set the size of your logo by adjusting the logo height slider and to hide it on either/or the primary and/or fixed header.

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. You can check the box to hide the logo here too.

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. You can check the box to hide the logo here too.

Set the Divi logo placement to any of the 5 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 and slide-in header style logo placement for both is on 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 how 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 the Fixed Navigation Bar.

Remove the logo from the Divi header

You can turn off this fixed navigation option by going to Theme Options > Header & Navigation and then into both the  Fixed Navigation Bar and Primary Navigation bar tabs and checking the Hide Logo Image checkbox.

Stop the Divi logo from shrinking after the 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 the logo before or after the 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 must 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); } 

Change the logo size on the mobile

You can set the size of the logo in the Theme Customizer as described above, but it does not affect the size of the logo on phones.

The mobile logo is displayed in a smaller size that is set in the parent Divi style.CSS file. We can use custom CSS in Divi to override the styles and increase the size.

Use the following custom CSS to change the Divi logo size on mobiles. Just add the code to your WordPress Dashboard > Divi > Theme Options > Custom CSS.

@media only screen and (max-width: 767px) {
body header img#logo {
max-width: 80%!important;
max-height: 80%!important;
height: auto!important;
width: auto!important;
}
}

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