• Facebook Icon Link
  • Instagram Icon Link
  • Reddit Icon Link

How to Make the Logo Overlap in Divi.

How To Make Logo Overlap In Divi Graphic

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.

Divi Logo Before and After

Quickies.

How to Upload a Logo to Divi.

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

Divi Theme Options Link

3. Next to Logo, click on Upload.

Upload Logo in Divi Graphic

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

Set as Logo Button

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

Divi Logo

How to Configure the Divi Navigation Bar.

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

Divi Theme Customizer

3. Go to Header & Navigation > Header Format.

Divi Header Format

4. 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.)
5. Go back to Header & Navigation.

Header and Navigation

6. Click on Primary Menu Bar.

Primary Menu

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

How to Set the Fixed Navigation Menu Height.

1. Go to Header & Navigation > Fixed Navigation Settings.

Fixed Navigation Settings

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

3. Publish your changes.
4. 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.
1. Login to the admin area of your website.
2. Go to Appearance > Customize > Additional CSS.

Divi Additional CSS

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

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

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

Related Posts.


siteground hosting sale
Leave a Reply

Your email address will not be published. Required fields are marked *