Divi Theme Examples
  • SHOWCASE GALLERY
    • Website Category
      • Is It Divi?
      • Animals
      • Blogs & Vlogs
      • Books + eBooks
      • Business & Finance
      • Church
      • eCommerce
      • Education & Training
      • Elegant Themes Demos
      • Events
    • Website Category
      • Fashion & Beauty
      • Food & Drink
      • Health & Fitness
      • Home & Garden
      • Hospitality & Entertainment
      • Kids
      • Landing & Sales Pages
      • Marketing
      • Music
    • Website Category
      • Non-profit & Charity
      • Personal Brand
      • Photography & Art
      • Real Estate & Property
      • Sports
      • Tech & Software
      • Trades & Services
      • Travel & Tourism
      • Web & Graphic Design
    • Popular
      • Free Divi Builder Layout (Demos)
      • Best Divi Examples
      • Best Divi Child Themes
      • Divi Products & Services
  • DIVI LAYOUTS
  • CHILD THEMES
  • PLUGINS
  • HOSTING
  • BLOG
  • RESOURCES
    • DIVI CHANGELOG
    • BLANK CHILD THEME
    • DTE FREEBIES
    • DIVI DISCOUNT
Select Page

Divi logo size & how to customize

by Craig Longmuir | Feb 28, 2023 | Divi Resources, Divi Tutorials | 4 comments

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.

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

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.

Divi Logo size is 93x43 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 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.

Divi log size

Where and how to add your own 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.

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

Upload Divi logo in Theme Options

Using a Divi SVG logo

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

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

Once you have installed the plugin you will be able to upload your SVG logo and set it in the Theme Options like in the steps mentioned above.

Change the Divi logo size using the Theme Customizer

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

Here there are options to set the size of your logo 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.

change divi logo height

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

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

divi centered logo placement

Centered header style logo placement is above the header menu items

centered inline divi logo

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

divi full screen slide-in logo

Full Screen & 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 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 the Fixed Navigation Bar.

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.

stop divi logo shrinking

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 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.

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

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;
}
}

divi overlapping logo

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 divi logo on scroll

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

5 5 votes
Article Rating
Craig Longmuir is a a freelance web designer since 2006 and is the owner of DiviThemeExamples.com showcase gallery and DiviLayouts.com layout directory. A long-time Elegant Themes members and the original curator of Divi website examples, layouts, plugins and child themes since 2014. View full author profile & posts
Subscribe
Notify of
guest
Save my name, email, and website in this browser cookies for the next time I comment.
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.
guest
Save my name, email, and website in this browser cookies for the next time I comment.
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dozza
Dozza
3 years ago

Like that logo switch on scroll! Tnx.

3
Reply
Benjamin
Benjamin
3 years ago

Thanks Craig, some great header theme modifications

2
Reply
LauDivi
LauDivi
1 year ago

Bonjour, je cherche à faire remplacer mon Logo pour la version Responsive, est-ce possible de le faire disparaitre et apparaitre un autre Logo ?
Merci

2
Reply
Mandy Cee
Mandy Cee
1 year ago

Thanks for the detailed tutorial Craig.

1
Reply

Recent Posts

  • 11 Tips to speed up your Divi website
  • How to customize the Divi contact form success message
  • How to use anchor links in your Divi website
  • How to use ChatGPT with Divi
  • How to add a header to your Divi website
  • Divi logo size & how to customize
  • Best Divi header layouts
  • Divi portfolio layouts you can use for free
This site lists the best hand picked Divi websites & products from developers all over the world so you get to see only the very best.  Our junk filter is ON! Site Quicklinks;
  • Divi Examples
  • Divi Child Themes
  • Divi Layouts
  • Divi Plugins

10 percent discount on elegant themes membership
Get 10% discount on Elegant Themes membership using my affiliate link.

Thanks for joining us

Subscribe

Join the email list for occasional email updates of all things Divi…

Facebook follow icon    Twitter follow icon    Youtube follow icon    Pinterest follow icon

About Us | Contact Us | Affiliate Disclosure | Privacy Policy & cookies | What Is Divi? | Submit Website

Copyright © 2014-2023. All rights reserved. 

Divi is a registered trademark of Elegant Themes, inc. This website is not affiliated with, nor endorsed by Elegant Themes and is run by Craig Longmuir.