How can I change the breakpoint for the default Divi header to display the mobile menu at a different screen width?

To change the breakpoint for the default Divi header so that the mobile menu appears at a different screen width, you can use custom CSS in the Divi Theme Options. Here’s how you can do it:

1. Access Divi Theme Options:
   • From your WordPress Dashboard, navigate to Divi > Theme Options.
2. Add Custom CSS:
   • Scroll down to the Custom CSS box.
   • Copy and paste the following CSS code into the box:

@media screen and (max-width: 1140px) {
    #et-top-navigation #et_mobile_nav_menu {
        display: block !important;
    }
    
    #et-top-navigation #top-menu {
        display: none !important;
    }
}