In this step by step tutorial you will be learning how you can create an overlapping logo in Divi.

In this example, I am using a portrait shaped logo and it looks like this in the Divi menu bar:

Creating the overlapping logo

Divi > Theme Options > CSS (at the bottom of the page) and place the following snippet:

Explaining the CSS snippet code

I have created 2 CSS snippets with media queries (with media queries you can control on what devices the code will be applied to). The first snippet applies to desktop and the second one is for tablet and mobile.

This way you can better control the height of the overlapping logo. You probably want to make the size for tablet and mobile a bit smaller.

You can change the max-height percentage value for your own needs (this will increase or decrease your logo size). You can change the margin-top value for more or less space between the logo and the top bar.

And now it looks like this: