How to Create a Divi Overlapping Logo

Posted on January 26, 2017 by in Divi Resources | 36 comments

How to Create a Divi Overlapping Logo
Premade Layouts

Check Out These Related Posts


  1. Awesome! Just what I needed.

  2. Awesome!

  3. Useful. Thanks.

  4. Thanks Leslie, very useful!

  5. Can we move the logo UP at all?

  6. Thank you so much Leslie! Great tips! Also, I know what it’s like as a fellow second career web designer! All the best.

  7. Very nice and simple thank you very much ๐Ÿ™‚

  8. 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?

  9. 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?

  10. 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!

  11. In the last example we see that le logo is touching the top menu and main menu. How can we achieve this? Thank you!

  12. Very useful! And so simple, thanks!

  13. 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…

  14. How would you accomplish the same effect in EXTRA theme?

  15. Great! but don’t work with Extra theme?

  16. Very useful, thanks!

  17. 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.

  18. Thanks,Simple and useful tutorial,was looking for this code and finally it’s here

  19. 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?

  20. cool … !! and thank you, I’ve applied in my website.

  21. 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.

  22. 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.

  23. Thanks Leslie, I just have placed it on my website, it looks great, I’m happy with it!

  24. Awesome!

    Is it possible when I’m scrolling page, logo go back to the menu’s line?

  25. 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.

  26. 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,

  27. 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?


  28. Same question as Fernando and Steve, can anyone help please?

  29. Same question as Fernando and Steve…

  30. Nice tutorial, however my logo also shrinks/distorts when the page size is reduced.

  31. 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;

  32. Same question as Blagovest. I would like to logo to shrink back when scrolling too.

  33. Asome! I have a question: How the menu bar disappear when you move the page down?

  34. 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.:

      .et-fixed-header #logo { max-width: 12% !important;}

Join To Download Today

Pin It on Pinterest