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:
Create an awesome mobile header and hamburger menu in the Divi Theme Builder. We’ll optimize the menu for smartphones and tablets.
We’ll also add three CSS snippets to make the Divi mobile menu even better. Scroll down to copy the code.
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.
2 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/