How to Create an Overlapping Logo in Divi

by Mark | Feb 13, 2019 | Divi tutorials | 0 comments

0 Shares

If you have a portrait shaped logo or you just want to have your logo bigger without adjusting the height of the menu bar than the overlapping logo is a good solution.

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:

As you can see the logo is barely visible and way too small. We’re going to fix this with the overlapping logo technique.

Creating the overlapping logo

Step 1
Upload a logo in theme options. if you don’t know how to upload a logo you can follow this guide.
.
Step 2
In your WordPress dashboard navigate to:

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

/* Overlapping logo for desktop*/

@media (min-width: 981px) {
#logo {
position: absolute;
max-height: 350%;
margin-top: 15px;
}}

/* Overlapping logo for tablet & mobile*/

@media (max-width: 980px) {
#logo {
position: absolute;
max-height: 200%;
margin-top: 15px;
}}

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: