How to Make the Logo Overlap in Divi (Simple Steps) @ TwentySixForty

Overview.

Have you ever had to design a website with a square or portrait-oriented logo? If you have, you know that it can end up looking very small in the Divi header. One way to fix this is to make your logo overlap the bottom of the navigation bar. In this tutorial, I will show you how to format your logo to overlap the navigation bar in the Divi WordPress theme.

Quickies.

How to Upload a Logo to Divi.
Configure the Divi Navigation Bar.
How to Set the Fixed Navigation Menu Height.
How to Make The Logo Overlap in Divi.

How to Upload a Logo to Divi.

Login to the admin area of your website.
Go to Divi > Theme Options in the admin sidebar.

Divi Theme Options Link

Next to Logo, click on Upload.

If your logo is not yet in the Media Library, upload it.
Select your logo.
Towards the bottom of the screen click on Set As Logo.

On the Divi Theme Options page, click Save Changes.

When you go to the front-end of your website, you should now see your logo.

How to Configure the Divi Navigation Bar.

Login to the admin area of your website.
Go to Appearance > Customize.

Divi Theme Customizer

Go to Header & Navigation > Header Format.

Divi Header Format

Select the Header Format you want to use. (I recommend using either the Default or Centered Inline Logo format. The Centered option will not work well for this.)
Go back to Header & Navigation.

Header and Navigation

Click on Primary Menu Bar.

There are a lot of settings here but the important one for this tutorial is the Menu Height.
Set the Menu Height to your desired height. Don’t worry about the Logo Max Height because we will override this later.
Publish your changes.

How to Set the Fixed Navigation Menu Height.

Go to Header & Navigation > Fixed Navigation Settings.

Fixed Navigation Settings

Set the Fixed Menu Height to your desired height. (This controls the height of the menu bar after the page has been scrolled. I have found it works best to set this value to the same value as the Menu Height when doing an overlapping logo.)

Divi Fixed Menu Height

Publish your changes.
Now that the navigation bar is set up let’s make this logo overlap!

How to Make Your Logo Overlap in Divi.

If you are using a child theme, you can add this CSS to your child theme’s style.css file. If you are not using a child theme or are unsure, follow the steps below.

Login to the admin area of your website.
Go to Appearance > Customize > Additional CSS.

Divi Additional CSS

Add the following CSS code to the Additional CSS area.

You will probably need to adjust these values to fit your specific setup.

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

Add CSS to Divi

If you are using the Centered Inline Logo format, you may need to add the following code as well.

.centered-inline-logo-wrap{
	width:initial !important;
}

The max-width: 980px code effects the logo when the screen is wider than 980px and the min-width: 981px code effects the logo when the screen is less than 981px wide. If you need to make adjustments to the logo on mobile devices, adjust the min-width: 981px code.

Now you should have an overlapping logo on your Divi website.