08000 433 006 info@cloud-genius.com

Changing mobile menus to full in Divi on Tablets

We use the Divi theme on many of our websites. This is a powerful WordPress theme. Sometimes you want to use the full menu on tablets in Divi instead of the mobile menu.

For instance, on a mobile you get:

Home_-_M_and_S_Window_Cleaning_Ltd

Whereas on a desktop you get the full menu:

Home_-_M_and_S_Window_Cleaning_Ltd

The way the Divi theme works is that on TABLETS (e.g. iPad) you get the mobile menu. This might not be what you want.

Jake, our wizard developer, came up with this bit of code that puts the full menu onto tablets:

You will need to insert the following code into the CSS of the page.
(This code needs to go above any other code that targets certain sized screens)

/*Tablet Menu Shown*/

@media only screen and ( max-width:980px ) and ( min-width:500px ){

#top-menu-nav {
display:block !important;
margin-bottom:20px;
margin-top:6px
}

#top-menu {
display:block !important;
}

#et_mobile_nav_menu {
display:none !important;
}

.et-fixed-header #top-menu-nav {
margin-bottom:0;
}

/* set the width, and right align */
#top-menu-nav {
max-width: 980px;
right: 0;
left:auto;
}
}

So now you know. If you need assistance putting this on your Divi-powered WordPress website, then give us a call!