Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Make The Logo Taller And Overlap The Divi Menu Module

Nelson Miller Profile Orange
This Divi tutorial will show you how to make the logo image taller with CSS to overlap the Divi Menu module.

▶️ Please watch the video above to get all the exciting details! 👆

Make The Logo Overlap The Top And Bottom Of The Divi Menu

This tutorial is very easy because it only takes a tiny bit of CSS code and we can add it directly into the Menu module. So go head and go to your Theme Builder header or wherever else you have the Menu module, and open the settings. Go to the Advanced tab, open the Custom CSS toggle, and find the Menu Logo CSS box. This is where you can type or paste the CSS to make the logo image overlap the menu. You can use any value you want, but in our video I am using -30px margin top and bottom. But of course, this is meant to be customized for your logo height, menu height, or whatever your situation happens to be.

margin-top: -30px;
margin-bottom: -30px;
make the Divi logo overlap the menu module with CSS

And that’s it! I told you it was going to be quick and easy, and it sure was!

Make The Logo Overlap The Bottom Of The Default Divi Menu

If you came here looking for the CSS code to make the logo overlap the default Divi menu, then I won’t disappoint you. There are many other tutorials about this, but the snippet below will give you a great starting point. The values are definitely meant to be changed, so don’t expect them to magically work for any size of logo. The values depend entirely on the height and width of your logo, and on how much overlap you want to show.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*set the logo height and overlap on desktop*/

@media only screen and (min-width: 981px) {
	#logo {
		min-height: 100px;
	}
}


/*set the logo height and overlap on tablet and mobile*/

@media only screen and (max-width: 980px) {
	#logo {
		max-height: 80%;
		width: auto;
		max-width: 80%!important;
	}

Be sure to adjust each of the values here to fit your needs!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

12 Comments

  1. Martin Hult

    Hey,
    Having the global header with a 0px padding to the top.
    How can I achieve making the logo floating downwards?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Martin,
      This tutorial is for the Menu module, as other people have tutorials already for the default header. It’s also impossible to help with a question like that without seeing it.

      Reply
  2. Reed <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Is there a way to achieve the overlap effect when using the inline-centered logo menu layout? Adding a negative margin to the top and bottom of the menu logo CSS field seems to cut off the top and bottom of the logo by the total input margin and move the entire logo container up. Is it possible to have two sections, with an inline-centered logo menu layout in the second section that overlaps part of the first section?

    Reply
    • Reed <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Basically what you have on peeayecreative.com, but with an inline-centered-logo menu layout where the logo overlaps into the secondary menu in the section above.

      Reply
  3. Reed <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Update to my last comment. I think I found something that will work. Got some help from ET. I didn’t think to oversize the height.

    .overlaplogo {
    padding:0 !important;
    }
    .overlaplogo .et_pb_menu–with-logo {
    height: 90px;
    margin-top: -30px;
    overflow: visible;
    }
    .overlaplogo .et_pb_menu__logo-wrap {
    height: 120%;
    }
    .overlaplogo .et_pb_menu__logo-wrap img {
    height:120px !important;
    }
    .overlaplogo .et_pb_menu–with-logo .et_pb_menu__menu>nav>ul>li>a {
    padding:0 !important;
    }
    .overlaplogo .et_pb_menu__logo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    }

    Reply
  4. TIm Roberts

    We are using a Primary Menu Bar and a Secondary menu bar. Is it possible to set the logo to centered between secondary and primary. Would it be better for me to use the Theme builder to accomplish this?

    Reply
    • Hemant Gaba

      Yes, using the theme builder would be better. You can add the following code in Menu settings > Advanced > Custom CSS > Menu logo:

      position: absolute;
      top: -40px;

      Change the top value as per your requirement. Let me know how it goes!

      Reply
  5. Aline

    Hello team !
    Like Reed, I’m trying to apply the overlap on a menu module with the logo centered in the middle, but it doesn’t work.
    I tested the code that Reed mentioned, but it doesn’t work either…
    Can you help me?
    Thanks !

    Reply
    • Hemant Gaba

      Hi Aline!

      Could you please share the URL of the page to investigate further?

      Reply
  6. rahi

    Hi,
    How can you have this effect, the overhanging logo only one the primary menu but not in the fixed navigation?
    Do you have a solution?

    Reply
    • Hemant Gaba

      Hi Rahi!

      Please use the following code instead.

      @media only screen and (min-width: 981px) {
      #logo {
      min-height: 100px;
      }
      #logo.et-fixed-header{
      min-height: 54%;
      }
      }

      Hope it helps!

      Reply
  7. rahi

    Hi,
    Can you use the Logo menu overlap only for the primary menu but not in the fixed menu that is used when you scroll the website. currently it overlaps on the fixed menu as well. It does not look good as the logo is big and also the colour does not fit for the fixed menu as it appears when you are scrolling.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart