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

How to Fix Menu Items Being Overlapped by the Logo in Divi

Mark Hendriksen | February 13, 2019 | 9 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.

In this tutorial you will be learning how you can fix the menu items from being overlapped by your logo (See also my other tutorials in the Ultimate Divi Theme Logo Guide for other fixes.)

If you are using a horizontally oriented logo in Divi that is very wide then it can overlap your menu items on smaller screen sizes.

In the image below you can see this happening.

Menu items overlapped by logo in divi

Because the menu breaks down on a second line the logo increases in size and overlaps the menu items.

Fixing the overlapping menu in Divi

We can fix this by increasing the menu bar width. To do this we will be using a CSS media query.

Place the following snippet in:

Divi > Theme Options > CSS

@media (min-width: 981px) and (max-width: 1350px) {
.container {
    width: 95% !important;
}}

It will now look like this.

Menu items fixed

Explaining the code

By default the width of the top header (menu) is 80%. We have now increased this to 95%. Because we are using a media query these changes will only apply to desktops with a width between 981px and 1350px. In case your logo is still overlapping the menu items you can increase the size of 1350px to (for example) 1450px.

If you scroll down the page you notice that the logo and menu shrinks down. Sometimes you have clients that don’t want this to happen. In those cases you can follow this tutorial: Stop the logo in Divi to shrink down

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

9 thoughts on “How to Fix Menu Items Being Overlapped by the Logo in Divi”

  1. Hi followed all your instructions. Even changing the max-width to 1450px. The website is lksimagine.com. Can you take a look possibly tell me how I can fix this?

    Reply
    • Hi Steven,

      Ue this snippet

      @media (min-width: 981px) and (max-width: 1350px) {
      .container {
      width: 95% !important;
      padding-left: 0px !important;
      padding-right: 0px !important;
      }}

      Reply
  2. I still need help… Nothing I do seems to make any difference. I’ve cleared the cache and tried all your codes. Please help me. Site is staging.tankandsoilservices.com

    Reply
    • Hi Brian,

      In your case, your menu items are very long work with a dropdown menu or place a bar above your header with some menu items (as I have on this site, I placed some of my menu items in a top bar).

      Reply

Leave a Comment

0 Shares
Share
Pin
Tweet