[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Create an Overlapping Logo in Divi

Mark Hendriksen | February 13, 2019 | 0 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

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:

Small logo in divi header

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:

Overlapping logo in Divi menu bar

You Might Also Like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

Leave a Comment

1 Shares
Share
Pin1
Tweet