Solving Divi Menu Responsive Issues
Creating a navigation menu that works well on all screen sizes can take some time and dedication. Thankfully, some of our recent tutorials will help make that much easier. This tutorial will cover several ways to make your menu responsive and keep your Divi Menu module from overlapping to two lines.
All websites are different, and depending on how many menu items your site needs, you will need to adjust the way the menu breaks or overlaps. With too many menu items, the menu overlaps and goes to two lines, which often looks really bad and unprofessional. There are a few things we can do to solve these issues, so let’s get started!
#1. Change The Divi Menu Module Breakpoint
Perhaps the most obvious way to fix the Divi Menu from overlapping to two lines is to simply change the responsive breakpoint. We have already covered that in a full written and video tutorial on How To Fix The Divi Menu Module Breakpoint, so be sure to check that out.
#2. Reduce The Menu Item Spacing
Another good way to keep the Divi Menu from overlapping to two lines to reduce the spacing on each menu item. There are several ways to do this, and we can do it on all devices or just at specific breakpoints.
Reduce Divi Menu Spacing In General
By default, the menu has 11px of padding on each side of the menu items. We can reduce that amount with CSS, and give the menu just a little more breathing room.
You can adjust the 6px number to meet your needs, but the following CSS snippet will get you started. Just copy and paste this snippet into the Divi>Theme Options>Custom CSS box.
/*reduce menu item spacing*/
.et_pb_menu .et-menu > li {
padding-right: 6px;
padding-left: 6px;
}But hold on.
Reduce Divi Menu Spacing At Specific Breakpoints
To make this really effective, we would want to apply that smaller spacing only on certain device sizes.
Let’s say you want the spacing to apply on on laptops but not on desktop. You could start with this, and change the numbers as needed.
/*reduce menu item spacing at specific breakpoint*/
@media screen and (max-width: 1366px) {
.et_pb_menu .et-menu > li {
padding-right: 6px;
padding-left: 6px;
}
}#3. Make Room For The Menu Module
Place Menu Module In Fullwidth Row
A bit more obvious, but just as good of a solution, is to increase the size of the column that the Divi Menu module is located in. You could even make the row fullwidth by adjusting the Row settings in the Sizing toggle to Width = 100% and Max Width = 100%.
Reduce Gutter Width to 1
Sometimes the gutter, which is the spacing between columns, is too wide. This extra room would help a lot, so you can try reducing the gutter width. You can find this in the Row settings under the Design tab.
Change The Column Structure
Perhaps the most obvious, but sometimes you need to make more room for that menu. If you can’t find a column structure you like, just follow our tutorial on How To Resize Divi Column Widths. This will literally give you any column size you want! It’s a clever trick that even beginners can do with one line of CSS.
Hello nelson, thank you for the information..i have tryed the css codes, but on my site there are no effects..can you maybe see why its so ?
http:/bau.lefox.de
Thank you very much
Hi Met,
Is this spam?
thanks for making this wonderful message