How to Create an Overlapping Logo in Divi
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
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:
Join today
Free Membership
Sign up for a Free membership and get access to this and all other free Divi layout packs, cheat sheets, exclusive discounts and much more.
Join today
Free Membership
Free Divi layout packs
Checklists & Cheat sheets
Exclusive discounts
0 Comments