Divi Mobile Menu Breakpoint

WRITTEN BY :
Aless Design Studio
POSTED ON :
17/11/2021
TAGS :

Table of Contents

In this blog post, we will learn how to set a new Divi Mobile Menu Breakpoint. 

This could be very useful because your design must be unusual. There are many different ways to show up on the website, and knowing this little trick maight be a game-changer.

Why we need to know how to set a new Divi mobile menu breakpoint?

Sometimes you may be developing big websites, with a lot of menu items. And when you decrease the size of the device before the tablet and mobile, those items go on two rows.

The typical Divi mobile menu breakpoint is at 980px. We will extend the breakpoint to 1300px in this demo. Setting up a new Divi mobile menu breakpoint could be done with the help of a little piece of CSS!

Divi Mobile Menu Breakpoint

Set up a new breakpoint for default Divi menu

Use this CSS snippet if you are using the default menu in Divi.

				
					/* ### Menu breakpoint for default menu ### */
@media only screen and (max-width: 1300px) {
 #et_mobile_nav_menu {
	display: block;
}
 
#top-menu {
	display: none;
}}
				
			

Set up a new breakpoint for menu created in the Theme Builder

Use this CSS snippet if you have created your website menu in the Theme Builder 

				
					/* ### Menu breakpoint for the theme builder ### */
@media only screen and (max-width: 1300px) {
.et_pb_menu .et_pb_menu__menu {
    display: none !important;
}
	
.et_mobile_nav_menu {
    display: block !important;
}}
				
			

As you can see it is pretty easy and fast to change the Divi mobile menu breakpoint. If you need to extend the value (we have extended it up to 1300px) type a higher number, but make sure not to go too much – you want to keep your design nice and neat. 

 1,594 total views,  3 views today

Leave a Reply

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

Related Posts.

WordPress 5.9
WordPress

WordPress 5.9 Big Update & Big Changes

WordPress 5.9 is the first major release of 2022, as it was launched on January 25, 2022. This recent version brings new features and enhancements that make full site customization even easier.

 1,271 total views,  2 views today

Read More »
WRITTEN BY :
Aless Design Studio
POSTED ON :
17/11/2021
TAGS :

Table of Contents

In this blog post, we will learn how to set a new Divi Mobile Menu Breakpoint. 

This could be very useful because your design must be unusual. There are many different ways to show up on the website, and knowing this little trick maight be a game-changer.

Why we need to know how to set a new Divi mobile menu breakpoint?

Sometimes you may be developing big websites, with a lot of menu items. And when you decrease the size of the device before the tablet and mobile, those items go on two rows.

The typical Divi mobile menu breakpoint is at 980px. We will extend the breakpoint to 1300px in this demo. Setting up a new Divi mobile menu breakpoint could be done with the help of a little piece of CSS!

Divi Mobile Menu Breakpoint

Set up a new breakpoint for default Divi menu

Use this CSS snippet if you are using the default menu in Divi.

				
					/* ### Menu breakpoint for default menu ### */
@media only screen and (max-width: 1300px) {
 #et_mobile_nav_menu {
	display: block;
}
 
#top-menu {
	display: none;
}}
				
			

Set up a new breakpoint for menu created in the Theme Builder

Use this CSS snippet if you have created your website menu in the Theme Builder 

				
					/* ### Menu breakpoint for the theme builder ### */
@media only screen and (max-width: 1300px) {
.et_pb_menu .et_pb_menu__menu {
    display: none !important;
}
	
.et_mobile_nav_menu {
    display: block !important;
}}
				
			

As you can see it is pretty easy and fast to change the Divi mobile menu breakpoint. If you need to extend the value (we have extended it up to 1300px) type a higher number, but make sure not to go too much – you want to keep your design nice and neat. 

 1,595 total views,  4 views today

Leave a Reply

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

Related Posts.

WordPress 5.9
WordPress

WordPress 5.9 Big Update & Big Changes

WordPress 5.9 is the first major release of 2022, as it was launched on January 25, 2022. This recent version brings new features and enhancements that make full site customization even easier.

 1,271 total views,  2 views today

Read More »