1. Introduction
2. Web Hosting & Domain
3. Install WordPress
4. Choose Your Theme
5. Get To Know WordPress
6. Design With Divi Builder
7. Divi Theme Builder Templates
8. Import & Export Layouts
9. Checklist: After Launch
10. Let's Celebrate!
You are a star!
6.3 Style The Mobile Menu in the Divi Theme Builder
- Your progress:
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.
Resources & Related Content
CSS Snippets
Make sure the columns are not stacked in mobile devices by adding this in the main element in the Row CSS.
display:flex;
Add these CSS snippets in Additional CSS tab in the Theme Customizer to improve the Divi mobile menu.
/* Add close icon in open hamburger menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}
Links
- View the live demo layout website
- 10% off Divi (affiliate link)
- 73% off SiteGround Web Hosting (affiliate link)
Downloads
This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.
Comments
Feel free to ask questions and leave feedback on the tutorial here.
4 Comments
Submit a Comment
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Fabulous!
Thanks David, I’m glad you liked it! 🙂 Make sure to check out my tutorial on more advanced Divi mobile menus as well: https://divimundo.com/en/blog/how-to-create-stunning-divi-mobile-menus-with-divi-toolbox/
Hi Victor, thank you very much for this outstanding tutorial!! It’s really amazingly helpful for me.
Yet, while using the CSS Snippet (nr. 2) from above (the part with the two apostrophes: ‘\4d’), it didn’t work for me. But when I then looked up the same code from your other page (https://divimundo.com/en/blog/six-tips-for-a-better-divi-mobile-menu/), it actually did work for me.
The correct code snippet for me is: (‘\4d’).
It seems that my problem lies in the different kinds of apostrophes that you seem to use on this page. Of course, it might also be a local problem of my browser / computer (Chrome on Mac). But on my system, your pages use different ASCII characters (as I checked here: asciivalue.com). Just wanted to let you know this. Thanks again for your great work!
Thanks for sharing Jos! I’ve updated the code snippet now.