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