“Can you make my logo bigger?” is one of those things a web designer never want to hear from their client, but in case you actually do need to make your logo larger, then making that and other customizations are easy to do with the Divi Theme Customizer.
What size is the Divi logo?
The default Divi logo PNG dimensions are 93 pixels x 43 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. Unzip the Divi Theme files and it will be in Divi > psd. A quicker way to get the logo to use as a template is to just right-click on the logo in your browser and Save As.
How 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.
- In your WordPress dashboard menu click on Divi > Theme Options
- In Theme Options > General > General tab right at the top, you will see the Logo field.
- Click on the Upload Image button to select and upload your logo image into your media library.
- Click on Set As Logo and your logo URL will be added into the option field
- Clicking the Reset button will remove your logo and replace it with the default Divi logo
Divi logo placement options
In your Theme Customizer, you can choose between 5 different header styles that will result in your logo be 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 in 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.
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 in 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.
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) 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 scroll 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 scroll 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 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;
- Create your 2nd logo image and upload via the WordPress dashboard under Media > Add New
- Once uploaded, click on Media > library, click on the logo and copy the URL location
- add the following CSS code into Divi > Theme Options > Custom CSS
- Replace 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); }
More Divi logo customization tutorials
As with everything in the Divi world, there are already a lot of useful tutorials and guides for every part of the theme. If you would like to customize your Divi logo further then you can check out some of these free logo resources;
- Fixing Your Responsive Navigation Menu in Divi – A guide from Elegant Themes that walks you through some options to customize how the logo and navigation are displayed on mobile devices.
- Divi Nation Short: 3 Super Simple Divi Header Modifications – A guide from Elegant Themes with 3 header modifications including how to replace your logo with your site name text.
- Switching Your Logo on a Fixed Header in Divi – A guide from Elegant Themes that includes the logo swap effect listed in this post along with further steps to add a transition, invert logo and change poistion on scroll.
*This updated post was 1st published January 14, 2015
Leave a Reply