Hide or show WordPress menu items on mobile devices

TIPS

Nov 23, 2020 | Divi Tips | 0 comments

In Appearance/Menus click on the Screen Options tab at the very top right. In the “Show advanced menu properties” area, check the box next to CSS Classes. Use the either “hide-mobile” or “show-mobile” in the menu class field. NOTE: The max-width is the default Divi tablet break point width. You can change this to your specific needs. Add the following CSS code to the Divi theme options area or your child theme style.css file.
[css]
/* show hide on mobile */
@media only screen and (max-width: 980px){  
    .hide-mobile {display: none!important;}
}
@media screen and (min-width: 979px) {
     .show-mobile {display: none!important;}
}
[/css]

0 Comments

Submit a Comment

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

More Tips

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Ask the Divi Guy a Question

"*" indicates required fields