Code by Day | Explore By Weekend

How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon Tutorial by Pee Aye Creative

How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon

This quick Divi tutorial and code snippet will show you how to easily change the Divi mobile hamburger menu into an open menu like on desktop.

Show Divi Desktop Menu On Mobile

As I mentioned in the intro, there are many times when the hamburger menu is not idea. If you want to see this in action you can check out the demo of most of our Divi child themes that we have for sale.

The first step is to add a custom CSS class to the specific Menu module that you want to keep open on mobile. We do this so that the snippet does not affect all the menu modules, which allows us to choose which ones remain like normal and which ones are affected. Open the Divi Menu module settings and go to the Advanced tab. Got the CSS IDs & Classes toggle and find the Custom CSS input field. Place the class “pa-open-mobile-menu” in the input field.

HINT: If you need help with any of this, be sure to watch the video!

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*show desktop menu on phone*/

@media (max-width: 980px) {
	.pa-open-mobile-menu .et_pb_menu__menu {
		display: flex!important;
	}
	.pa-open-mobile-menu .et_mobile_nav_menu {
		display: none!important;
	}
}

And that my friends is how to change the hamburger icon into an open menu! I really like this effect and hope you do too.

Want To Do The Oppposite?

We have a separate tutorial on how to change the normal menu into a closed hamburger icon menu on Desktop! You can even use this to show both a normal desktop menu AND a hamburger menu at the same time. Go check it out!

How To Show A Divi Mobile Hamburger Menu On Desktop YouTube Video Tutorial by Pee Aye Creative
56
Last updated Jan 5, 2021 @ 4:34 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
tania millan
13 days ago

Works perfectly!
Thank you!

Naama
Naama
7 days ago

Thank you so much

Fernanda Prevedello
6 days ago

Very useful and smart! Well done

Last edited 6 days ago by Fernanda Prevedello

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart