How to Create a Divi Overlapping Logo

In today’s tutorial I’m going to be sharing a little code snippet that will make your logo overlap the primary menu bar. It’s super easy to achieve and makes for a nice little variation of the default horizontal menu style.

Here’s how it’s done!

How to Create a Divi Overlapping Logo

Subscribe To Our Youtube Channel

Theme Customizer Settings

First when going in the customizer I’m going to stick with the default settings for header format.

Next, go to Header & Navigation > Primary Menu Bar and set the “logo max height” to 100.

You may be wondering: why am I setting this if we’re going to be controlling the logo size with CSS?

This is really just a fallback step; it’s good to get in the practice of thinking of and implementing fallback processes should something not display as you’re telling it to. In this instance I think the logo will look better as full-height if for some reason our custom CSS doesn’t apply.

I have never had this overlap code not work for me, but that doesn’t mean that the internet Gods might one day not let the child stylesheet load or make a specific browser give us a hard time. We all know issues sometimes just occur with seemingly no rhyme or reason. Think of it as a visual plan b.

The Custom CSS Code

Add the following code to your child stylesheet OR to Divi theme options > general > custom CSS box (at the bottom of the page):

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

Explaining The Code:

• This code is using pixels instead of % because everyone reading this will be using a different size logo image, so this is just a better way to control the size for the purposes of this tutorial, but if you prefer % based calculations and know how to implement them properly you can certainly use that method instead.
• Media queries are being used to have the logo overlap just a bit less on smaller screens so it’s not so obtrusive. If you don’t want the logo to overlap at all on mobile you can delete that first media query and the logo will have the default appearance on mobile and tablets.
• Why not use height instead of min-height? Using min-height is what is making it extend out of the ‘container’ it is housed inside of, this cannot be achieved with just targeting the height (not even with !important).

Quick Tip:

Since most logos will never be displayed much bigger than the 250px wide ballpark you should be uploading a logo image that’s around that same size, or whatever max you are considering for retina.

There’s no need to upload a logo image 1500px wide when it will be displayed at a fraction of that size because then it will just be using resources unnecessarily. The image size used for the logo in this tutorial is 225 X 120.

The End Result

You should see a nice little overlap effect once you’ve applied the CSS and played with that 120 number a bit 🙂

Examples of Overlapping Logos on Divi Sites

Some reasons you may want to use this style, aside from just changing the default look, are if you don’t have a square or rectangular logo. Maybe your logo is unusually shaped or should be used with a transparency behind it. Sometimes these factors can force you to have to get creative with how it’s displayed, as we’ll see in some of the examples at the end of this post.

Also you could have a vertically rectangular logo. You certainly wouldn’t want a very big header area taking up all your site real estate just to fit your entire logo so this would be a great solution.

Yet another reason is if it has a lot of artistic detail that looks best viewed at a larger size so that the detail isn’t lost when the logo is shrunk down and contained inside Divi’s menu bar. This method would allow you to keep the logo at it’s maximum possible size – but be careful, not too big – without affecting the height of the navigation bar.

Here are some great examples of the overlapping logo being used on Divi sites out in the wild.

The Rustic Table

This is a restaurant site built with Divi, and as you can see it has an unusually shaped logo. That plus the fact that the logo probably would not look so great shrunk down to fit inside the main menu container is why this overlapping method helps a lot in overall visual appearance.

Engage Premium Divi Child Theme

Engage is a very reasonably priced ($10) Premium Divi Child Theme that has been designed for use on blogs. The circular logo hanging over the horizontal menu bar gives a really nice effect, and it’s nice how the fixed menu is allowing the logo to act as a true CTA for the home button.

Make a Splash Premium Divi Child Theme

This is the perfect example of what I mentioned earlier, having a logo that needs to be shown with some transparency behind it to get the full effect. This logo hangs off ever so slightly, it’s a small but very effective detail.

Wrapping Up

We hope you’ve enjoyed this little CSS tidbit and can make use of it on yours or your client’s sites. Let us know in the comments below if you have specific requests for more. And be sure to subscribe for more of these little nuggets from Elegant Themes!