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:
[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 */
[/css]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.
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.
Join Our Community
Enter your email ID below to get access to all our awesome resources and be a PRO in your field.
You have Successfully Subscribed!
Did You Like Our Post? Sign Up Below and Get Latest Content Directly Delivered to Your Inbox
Enter Your email ID and be the first one to know when the new post gets published on SurfnLearn.