Comments on: Adding Custom Breakpoints to Divi

By: Kristýna Sovová

Kristýna Sovová — Sun, 26 May 2024 10:38:58 +0000

Hi, thank you for a really nice post. My question is, how to change breakpoints for custom menu built in theme builder. I need to set hamburger menu earlier from 1024 px. I have tried several ccs codes but without any success.
For example:

/* Switch to hamburger menu at 1024px width or less */
@media (max-width: 1024px) {
.custom-hamburger-menu .et_pb_menu__wrap {
display: none;
}
.custom-hamburger-menu .et_mobile_nav_menu {
display: block !important;
}
.custom-hamburger-menu .mobile_nav {
display: block !important;
}
.custom-hamburger-menu .mobile_menu_bar {
display: block !important;
}
}

/* Hide the hamburger menu and display the classic menu at widths greater than 1024px */
@media (min-width: 1025px) {
.custom-hamburger-menu .et_pb_menu__wrap {
display: block !important;
}
.custom-hamburger-menu .et_mobile_nav_menu {
display: none !important;
}
.custom-hamburger-menu .mobile_nav {
display: none !important;
}
.custom-hamburger-menu .mobile_menu_bar {
display: none !important;
}
}

Do you have any idea how to do it?

Many thanks

Kristyna

By: Art Smith

Art Smith — Wed, 06 Jul 2022 20:36:43 +0000

I noticed your media queries lack anything in the 980px – 1100px space.

By: Paul

Paul — Thu, 17 Feb 2022 00:43:02 +0000

Nice post. However, I tried this with a 4-column ROW module with four images in each column. With the CSS I specified the below in order to have the 4-column ROW module turn into a 2-column row module at the desired breakpoint. It worked, BUT Divi retained the frou images in each column and created a 2-column row featuring 4 images in each row… not quite the desired effect.

.md-breakpoint {
columns: 300px 2;
}

I’m am simply trying to get 4-column rows to break into 2-column rows earlier in DIVI.

Any insights would be amazing! Huge fan of the Divi Engine Mega Menu and Mobile Menu module by the way 🙂