6.3 Style The Mobile Menu in the Divi Theme Builder

The final step in creating our global header is to style the Divi mobile menu. It should resemble the following design: a top bar at the top, followed by a hamburger menu that, when tapped, expands into a full-width menu with all our links. Let’s go back to the Divi Theme Builder.

Mobile optimization in Divi is quite straightforward. You can switch between different devices using the buttons on the left to preview your design on a tablet or mobile. Most design settings for tablets will be inherited for mobile, saving you time. However, you can tweak mobile-specific settings if necessary.

In the mobile view, you may notice that the top bar layout looks different from the desktop version. To have these two columns side by side, you can add a small CSS snippet. Go back to the desktop view, click the cogwheel for the row, and head to the Advanced tab. In the Custom CSS tab, type the following CSS code: “display: flex;” and save it. This will ensure that the two columns are side by side on mobile.

However, you might observe extra spacing between the columns on mobile. You can address this by heading to the Design tab, choosing Sizing, and using custom gutter width. Set the value to 1 to reduce the spacing between the columns.

Now, let’s style the hamburger menu. Open the mobile menu options and navigate to the Design tab. In the Drop Down Menu section, set the background color to dark gray for the drop-down menu. You can do the same for the mobile menu background color.

To enhance readability, you can set the mobile menu text color to white and change the color of the hamburger menu icon to white as well.

Next, you may want to change the hamburger icon into an “X” when the mobile menu is open for a more user-friendly experience. To do this, you can add some custom CSS. Copy and paste the provided CSS snippet in the Divi Theme Customizer under Additional CSS.

The final tweak is to make the mobile menu full-width. Apply the second CSS snippet in the Divi Theme Customizer as well.

Now, if you preview your website in mobile mode, you should see the top bar, a close icon for the mobile menu, and a full-width menu, making your mobile navigation more user-friendly.

To prevent the menu from being sticky on small screens, go back to the Theme Builder, click on the section containing the menu, go to Advanced, and then Scroll Effects. In the responsive settings, set the sticky option to “Do not stick” for tablet and mobile views. This ensures that the mobile menu won’t be sticky on small screens.

After making these final adjustments, save your changes and refresh your mobile view to see your fully styled and optimized global header.