{"id":10822,"date":"2019-02-13T11:23:33","date_gmt":"2019-02-13T10:23:33","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=10822"},"modified":"2025-04-24T06:39:52","modified_gmt":"2025-04-24T04:39:52","slug":"how-to-fix-menu-items-being-overlapped-by-the-logo-in-divi","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-fix-menu-items-being-overlapped-by-the-logo-in-divi\/","title":{"rendered":"How to Fix Menu Items Being Overlapped by the Logo in Divi"},"content":{"rendered":"\n

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<\/a> for other fixes.)<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

In the image below you can see this happening.<\/p>\n\n\n\n

\"Menu<\/figure>\n\n\n\n

Because the menu breaks down on a second line the logo increases in size and overlaps the menu items.<\/p>\n\n\n\n

Fixing the overlapping menu in Divi<\/h2>\n\n\n\n

We can fix this by increasing the menu bar width. To do this we will be using a CSS media query.<\/p>\n\n\n\n

Place the following snippet in:<\/p>\n\n\n\n

Divi > Theme Options > CSS<\/p>\n\n\n\n

@media (min-width: 981px) and (max-width: 1350px) {\n.container {\n    width: 95% !important;\n}}<\/code><\/pre>\n\n\n\n
It will now look like this.<\/p>\n\n\n\n
\"Menu<\/figure>\n\n\n\n
Explaining the code<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
If you scroll down the page you notice that the logo and menu shrinks down. Sometimes you have clients that don\u2019t want this to happen. In those cases you can follow this tutorial:\u00a0Stop the logo in Divi to shrink down<\/a><\/p>\n\n\n\n
You Might Also Like\u2026<\/h3>\n\n\n\n