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.
CSS Snippets:
1. Make sure the columns are not stacked in mobile devices by adding this in the main element in the Row CSS.
display:flex;
2. 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;
}
This video is a part of a complete WordPress tutorial with more than 6 hours of video material – completely free. Find the full tutorial at: [ Ссылка ]
All links, files and code snippets mentioned in the chapter is available below. 👇
🔗 AFFILIATE LINKS WITH EXCLUSIVE DISCOUNTS
➡️ 20% off Divi: [ Ссылка ]
➡️ 69-76% off web hosting: [ Ссылка ]
➡️ Divi Supreme: [ Ссылка ]
➡️ Divi Toolbox: [ Ссылка ]
➡️ Divi Blog Extras: [ Ссылка ]
➡️ Divi Form DB: [ Ссылка ]
This video is not sponsored but it contains affiliate links to SiteGround and Elegant Themes. If you make a purchase via these links, I’ll receive a commission. But it will NEVER cost more for you. Your support makes it possible for me to create more free content. Thank you! 🙌
🔗 DOWNLOAD FREE LAYOUTS & OTHER RESOURCES
➡️ All images, icons, code snippets and layouts used in this tutorial are available for free at: [ Ссылка ]
➡️ Visit the live demo website that we create in this tutorial: [ Ссылка ]
➡️ Free download of all layouts that I created for this tutorial: [ Ссылка ]
➡️ Premium Divi plugins mentioned in this video: [ Ссылка ]
➡️ Six tips for a better Divi mobile menu: [ Ссылка ]
⚡ DiviMundo.com is dedicated to spread knowledge about WordPress and Divi. The vision is that everyone should be able to design beautiful websites without exhausting coding issues.
⚡ DiviMundo.com is produced by Duse Media, a WordPress agency in Malmö, Sweden. Read more at [ Ссылка ] (In Swedish)
⚡ DiviMundo was founded in 2017 by Victor Duse, the tutor in this video.
Find more tutorials and more free WordPress web design resources at [ Ссылка ]
Affiliate disclaimer
We are dedicated to sharing knowledge about WordPress and Divi. Some of the links in this video are affiliate links. This means if you click on the link and purchase the item, I will receive an affiliate commission, but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. DivMundo is not affiliated with nor endorsed by Elegant Themes, SiteGround or any other brand mentioned in this video.
