Selecteer een pagina

How to fix the menu overlapping the logo in Divi

On smaller screens a wide array of menu items can overlap the logo in Divi and mess up the look of the header. A fast and simpel solution is a little CSS to trigger the mobile hamburger menu before things start to get ugly.

How To Fix the Messed up Divi Menu

Firstly we have to identify the screen-size where the menu and the logo start to get messed. We can use a responsive screen testing tool like Screenfly to see from what screen width the problems begin. Play with the screen width to see on what width the logo and menu get messed. For the website from the image above the menu and logo got messed from a screen width smaller then 1281px.

Now we know on what screen-size the problem begin, we can hide the the standard navigation that appears on desktops by default. We have to use a media query to specify the screen-size from where we don’t want to use the standard navigation.

@media only screen and (max-width: 1281px) and (min-width: 980px) {
 #top-menu-nav { display:none; }
}

The code above deletes the standard navigation on screen resolution between 980px and 1281px. By default the mobile menu will appear from 980px. To show the mobile menu until 1281px width we have to add the follow code:

@media only screen and (max-width: 1281px) and (min-width: 980px) {
 #et_mobile_nav_menu { display:block }
}

That’s all, messed up logo and menu problem solved. Here’s all of the code together:

@media only screen and (max-width: 1281px) and (min-width: 980px) {
 #top-menu-nav { display:none; }
}
@media only screen and (max-width: 1281px) and (min-width: 980px) {
 #et_mobile_nav_menu { display:block }
}

Adjust the max-width to match the width were the menu and logo gets messed on your site. The result should look like this: