Ensuring a seamless navigation experience across all devices is crucial for maintaining user engagement on your website.
Customizing the responsive breakpoints of the Menu Module allows you to control when and how your menu adapts to different screen sizes, providing an optimized and user-friendly interface.
This article will walk you through the steps to customize the Menu Module's responsive breakpoints.
Divi's Theme's built-in responsive settings will automatically replace the desktop menu with the mobile menu if the device's viewport (screen) width is less than 981px.
Customize the Menu Module's default breakpoints
Open the Menu module's settings by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS and add this CSS snippet
@media (min-width: 981px) and (max-width: 1024px) {
selector .et_pb_menu__menu {
display: none;
}
.et_pb_menu_0 .et_mobile_nav_menu {
display: flex;
align-items: center;
margin: 0 6px;
}
selector .et_mobile_menu {
top: 100%;
padding: 5%;
}
selector .et_mobile_menu,
selector .et_mobile_menu ul {
list-style: none;
text-align: left;
}
}
The above CSS snippet will force the mobile menu to show on devices with a viewport less than 1024px—usually, this is a tablet in landscape mode.
If you want the mobile menu to display on larger viewports, change the 1024px value in the above CSS snippet to the value you need.
Example: If the 1200px value is used, the mobile menu will appear on devices that have their viewport between 981px and 1200px.