10. Let's Celebrate!

Nu firar vi!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.

i

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

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.

Victor Duse
Victor Duse was born in Sweden in 1980 and has over 20 years experience of web design, web development and teaching in sectors like media, marketing, energy, industry and the public sector. He's the founder of DiviMundo and the WordPress Agency Duse Media in Malmö, Sweden. Victor is a Brazilian Jiu-Jitsu black belt and he has a soft spot for dark chocolate.

Comments

Feel free to ask questions and leave feedback on the tutorial here.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.