How to Modify the Divi Mobile Menu Style

If you see the normal mobile menu on most sites you see the three lines that are supposed to display as the mobile menu. Although this is widely accepted as the mobile menu it still confuses people who are not tech savvy and need more obvious visuals. In this video, I will show you how to modify the Divi theme mobile menu style to make it more obvious to the user browsing the website.

The code used in this video:

Additions to style.css:


/* Mobile Menu Edits */

.mobile_menu_bar:before {
content:"\62";
}

.mobile_menu_bar:after {
content:'Menu';
font-weight:900;
text-transform:uppercase;
line-height:1;
position:relative;
font-size:16px;
top:-6px;
padding-left:8px;
color: #fff;
}

/* End Mobile Menu Edits */

If you do not have a child theme installed, please view this video showing in detail how to install a child theme for Divi. Also here is a link to the elegant themes font icons.

Do you like the WordPress theme I am using? You can purchase the Divi theme from Elegant Themes, I would suggest going for the lifetime package. That’s what I went for and it made the most sense too.

Elegant Themes

Just letting you know, I do get compensated if you make any purchases after using the link above or any of the links that lead to elegant themes on my website.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!