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
Love how you provide the explanation for every tutorial. Thanks for the share.
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?
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;
}}
This made absolutely no difference.
Hi Heather,
Did you clear your browser cache afterward?
Thank you! Quick and easy fix for me.
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
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).
Obliged! Worked great! Thank you sir!