Divi Tutorial: Mobile Menu also on large screens(other devices)

divi template

The Divi theme automatically displays a 3-stripe folded menu, also known as a hamburger menu, when viewed from mobile devices but do you also want this type of menu on all types of screens?

If you want to display this menu regardless of the screen size, on mobile, tablet and desktop, just add the following code to the theme customizer’s Additional CSS section, which you will find under Appearance Customize Additional CSS in your site administration or, if you prefer, in the Divi Theme OptionsCustom CSS section, also in your site administration:

/* Divi mobile menu for desktop */
@media only screen and ( min-width:980px ) {
#et_mobile_nav_menu { display:block !important; margin-bottom:20px; margin-top:6px }
#top-menu-nav { display:none; }
.et-fixed-header #et_mobile_nav_menu { margin-bottom:0; }
/* Specify width and align right */
#mobile_menu { max-width: 400px; right: 0; left:auto; }}Code language: CSS (css)

Save the changes and you will always see the “burger” menu, no matter from which device they are visiting your website.

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

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

Scroll to Top