With the release of the iPad Pro we as designers (or do-it-yourself creators) have yet another screen resolution to deal with.

Fortunately, the Divi theme is already pretty great at accounting for many of the most common screen sizes but it seems that the team over at Elegant Themes haven’t quite gotten around to updating Divi for the iPad Pro.

But fear not! This quick fix should straighten your Divi site right up and make it look as good on the iPad Pro as it does on other screen sizes.

The Problem

The main issue when it comes to Divi and the iPad Pro is the main menu: it simply doesn’t collapse when it should do and you end up with some weird overlap. It looks something like this:

The Solution

What we need to do is to tell our theme that when the browser detects an iPad Pro screen resolution it should display the mobile menu.

/* iPad Pro Menu Fix */
@media only screen and ( max-width: 1040px ) {
#et_mobile_nav_menu {
display: block;
#top-menu-nav, #top-menu {
display: none;

The Result

The end result should look something like this:

Much better!

Have you noticed anything else wrong with the Divi theme on the iPad Pro? Let me know in the comments and I may be able to help.

How Can I Help?

Website Design

Looking for a beautiful, easy to maintain website that helps you connect with your audience? You've come to the right place.

Find Out More

Divi Extensions

Give your website a low-cost makeover or add some exciting new functions, it's easy with these excellent Divi resources.

View Products


Searching for a forward-thinking, creative Divi designer to add to your agency? See how I can delight your clients.

Learn More