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!
Awesome! Just what I needed.
Awesome!
Useful. Thanks.
Thanks Leslie, very useful!
Can we move the logo UP at all?
Thank you so much Leslie! Great tips! Also, I know what it’s like as a fellow second career web designer! All the best.
Very nice and simple thank you very much 🙂
Thanks for the tip. I found a wide logo would shrink horizontally, distorting the logo. I’ve had no time to play with fixing that yet. Any ideas?
Really good! Can I do it, but leaving my logo up? My current logo is a sentence bellow the menú. Can I leave it and use another image overlapping on the left too?
Awesome!! I was just struggling with the header element for a new site I am working on and this was the perfetct answer.
Thanks for the timely tip!
In the last example we see that le logo is touching the top menu and main menu. How can we achieve this? Thank you!
Very useful! And so simple, thanks!
I was just working on this topic since ten minutes when your newsletter hit my mailbox, leading me to this useful tip.
Couldn’t be more timely…
Thanks!
How would you accomplish the same effect in EXTRA theme?
Great! but don’t work with Extra theme?
Very useful, thanks!
This theme is superb – I created one more good looking website from the already brought Divi theme and used this overlapping logo on the same, it works.
Thanks,Simple and useful tutorial,was looking for this code and finally it’s here
This is great! but you can combine this with the effect of reducing the size of the logo when scrolling and the menu becomes smaller?
cool … !! and thank you, I’ve applied in my website.
This is great. I like to use a secondary header so that it gives me even more vertical real estate to deal with. I add a margin-top: -32px to the logo, but then you have to adjust the z-index in order to get the logo to appear over top of the secondary header.
Also, how would the code have to be modified to make this work with the centered in line logo style header? I tried it, and the logo was compressed horizontally.
Thanks Leslie, I just have placed it on my website, it looks great, I’m happy with it!
Awesome!
Is it possible when I’m scrolling page, logo go back to the menu’s line?
Great tip-
Thanks Leslie!
Hi there. Both of your recent tutorials have been simple and really helpful thank you. Quick question. My logo is looking fairly squashed on mobile. Is the code not mobile friendly or should I do some further downsizing on the logo before uploading it?
Many thanks to everyone here this is my first foray into both wp and divi and I’d drown if not for all the amazing resources and talented advisers.
Hi,
Thanks for this great tutorial.
I have question : I use centered inline logo and I want to change the .centered-inline-logo-wrap width wich is specified with inline CSS. My question is how can I do to overide this inline css rule ?
Thanks in advance,
Aude
i have the same issue like steve law.
“Also, how would the code have to be modified to make this work with the centered in line logo style header? I tried it, and the logo was compressed horizontally.”
what’s the solution for it?
THX
Same question as Fernando and Steve, can anyone help please?
Same question as Fernando and Steve…
Nice tutorial, however my logo also shrinks/distorts when the page size is reduced.
Only used this part to keep the logo from distorting/being squashed on smaller screens:
@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}
Same question as Blagovest. I would like to logo to shrink back when scrolling too.
Asome! I have a question: How the menu bar disappear when you move the page down?
The way to overlap both the top bar and the content without distortion when the logo resizes is:
div#top-header {z-index: 1000;}
#logo {margin-top: -50px;z-index: 1;}
@media only screen and (min-width: 981px) {#logo {max-height: 220px;}}
@media only screen and (max-width: 980px) {#logo {max-height: 100px;}}
I did this on my site, but my logo is on the left. And of course you would need to put in your own values that will work best for the margin-top and max-height. Good luck!
Oops. Left this out. Sorry.:
/*RESIZES LOGO IN FIXED HEADER*/
.et-fixed-header #logo { max-width: 12% !important;}