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

by | Feb 13, 2019 | Divi tutorials | 3 comments

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

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

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

3 Comments

  1. Athar

    Love how you provide the explanation for every tutorial. Thanks for the share.

    Reply
  2. Steven Foster

    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
    • Mark

      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

Submit a Comment

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

close
Lifetime access to all Divi child themes and plugins
0 Shares
Share
Tweet
Pin
Buffer