Changing mobile menus to full in Divi on Tablets

Written by John Dray (CEO)

11th July 2016

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!

You May Also Like…

Launching our new support portal

Launching our new support portal

Finding support can be difficult... so that is why we have launched our support portal. The idea is that people will...

Social Media Auto Publish Powered By :