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!
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.
2,128 total views, 1 views today
