Skip to main content

Displaying the Theme Builder Layout and Divi Mobile Header Simultaneously on Mobile

If you're looking to enhance your website's mobile navigation by displaying both the Divi Theme Builder layout and the Divi Mobile header with its Burger menu at the same time, you can achieve this with a few custom settings. This setup allows for greater flexibility and functionality in your mobile user interface. Here’s a step-by-step guide to set this up using custom CSS.

Step 1: Add Custom CSS​

To ensure that both the Divi Theme Builder menu and the Divi Mobile menu are displayed simultaneously without conflicts on mobile devices, you will need to add some custom CSS to your site.

  1. In your WordPress dashboard, go to Divi > Theme Options. This area allows you to manage global settings for your Divi theme.
  2. Scroll down to the Custom CSS box, which is part of the General Settings tab in the Theme Options. This section is used for adding custom CSS that will apply across your entire site.
  3. Paste the following CSS code into the Custom CSS box and click save.
@media only screen and (max-width: 980px) {
body #top-menu, body .mobile_menu_bar, body .et-l--header, body #et-navigation, body.dm-custom-header #main-header {
display: block !important;
}
}

Add Custom CSS

Testing and Troubleshooting​

After implementing the custom CSS, it's crucial to test how the menus appear and function together on various mobile devices:

  1. Check Visibility and Functionality: Ensure that both menus are visible and can be interacted with without overlap or other issues.
  2. Responsive Testing: Test on different screen sizes to confirm the menus adapt correctly across devices.
  3. Adjust CSS as Needed: Based on your testing, you may need to return to the Custom CSS section to tweak your styles for optimal performance and aesthetics.

Additional Tips​

  1. Keep It User-Friendly: While having two menus can offer more navigation options, ensure that this setup does not clutter the interface or confuse your users
  2. Monitor Performance: Adding additional elements on mobile can affect site performance. Monitor your site’s load times and optimize as necessary.

By following these steps, you can effectively display both the Divi Theme Builder layout and the Divi Mobile header with the Burger menu on mobile devices, enhancing your site's navigation capabilities and user experience.

Last updated on