A main menu with many menu links can quickly cause the main menu to break or overlap unsightly on laptops and large tablets.
By default, Divi breaks the menu at a screen width of 980px. With the following code snippets you can change the Divi menu breakpoints and make your main menu look neat.
Depending on whether you are creating a standard Divi main menu using the Theme Customizer or you are using the Theme Builder to build your main menu, you will need to use different code snippets.
1. Changing the breakpoint using the Divi standard navigation
Use the following code snippet if you built your Divi main menu using the Theme Customizer:
/* Change main menu mobile breakpoint */ @media (max-width: 1024px)/* Change the value here */ { #et_mobile_nav_menu { display: block !important; } #top-menu { display: none; } }
Original post by Jason Champagne: Fixing your responsive navigation menu in divi
2. Changing the breakpoint for the Divi Theme Builder navigation
In case you built your main menu using the Divi Theme Builder, the previous code won’t work. You need to use the following code snippet:
/* Change primary menu mobile breakpoint */ @media (max-width: 1024px) /* Change the value here */ { .et_pb_fullwidth_menu .et_mobile_nav_menu, .et_pb_menu .et_mobile_nav_menu { display: flex; float: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .et_pb_fullwidth_menu .et_pb_menu__menu, .et_pb_menu .et_pb_menu__menu { display: none; } .et_pb_fullwidth_menu .et_pb_menu__wrap, .et_pb_menu .et_pb_menu__wrap { justify-content: flex-end; } .et_mobile_menu { list-style-type:none !important; top:100%; } }
You can either copy the code snippet into the Additional CSS section in the Divi Theme Customizer or into the stylesheet of your child theme.
Did my code snippet help you? Or is anything not working? Just leave me a comment below.