A client’s WordPress site built with Divi experienced navigation layout issues when resizing the browser window. The default Divi breakpoints caused the full navigation menu to overlap or misalign before the mobile hamburger menu appeared. Our development team implemented a custom CSS breakpoint within Divi’s Theme Builder to ensure the mobile navigation triggered earlier, maintaining a clean and user-friendly experience across devices.
Issue Background
The client’s custom Divi header was functioning properly on mobile and desktop but became cluttered and misaligned on medium-width screens (around 1400px wide). The main navigation links and call-to-action buttons (“Login” and “Book a Demo”) would push into one another before the hamburger menu appeared.
Since Divi’s built-in tablet and mobile breakpoints didn’t activate the responsive hamburger menu early enough, the client requested a solution to display the mobile navigation sooner.
Diagnosis
Upon reviewing the issue, Freshy’s developer team identified that:
- The theme’s default Divi breakpoints (typically 980px and below) weren’t accommodating the custom header layout.
- The overlapping elements were caused by limited horizontal spacing on mid-sized screens.
- Global CSS adjustments could unintentionally affect other site templates using the same header.
To prevent site-wide style conflicts, the developer opted to isolate the fix within the specific Theme Builder header template used for this section.
Resolution Steps
- Scoped CSS Changes to the Template: Rather than applying global CSS, the new media query was added directly within the custom Theme Builder header, limiting its scope to that layout.
- Introduced an Earlier Breakpoint: The developer implemented a new breakpoint at 1405px, slightly above the default tablet breakpoint. This ensured the hamburger icon appeared before layout crowding occurred.
- Applied and Tested the New CSS:
@media only screen and (max-width: 1405px) {
.et_pb_menu .et_pb_menu__menu {
display: none;
}
.et_mobile_nav_menu {
display: flex !important;
}
}
- This CSS hides the full-width navigation and triggers the Divi mobile menu earlier.
- Adjustments were made to handle the “Login” and “Book a Demo” buttons to ensure visibility and accessibility.
- Cross-Device Testing: The team tested the new behavior using the cloned draft page to avoid affecting the live header during revisions. Once approved, the changes were merged into the global header template.
- Z-Index Adjustments: When the hamburger menu initially appeared behind other content layers, minor z-index tweaks were made to bring the mobile dropdown above all page elements.
Final Outcome
The final implementation resulted in:
- Smooth, visually consistent navigation across screen sizes.
- Early activation of the mobile hamburger menu for mid-sized screens.
- No global style conflicts thanks to scoped CSS within the Divi Theme Builder.
The client approved the update after visual testing and confirmed improved usability on tablet and laptop viewports.
Takeaways
This project highlights the importance of customizing breakpoints in Divi for complex or custom header layouts. While Divi’s defaults work for many sites, larger menus or unique button arrangements often require fine-tuning to maintain responsive integrity.
Developers should:
- Use scoped CSS when customizing Divi headers to avoid unintended global effects.
- Test responsive behavior across multiple devices and resolutions.
- Leverage Divi’s Theme Builder for safe, template-level modifications.
Need Help With Divi or Responsive Design Issues?
If your WordPress site’s navigation or layout breaks across devices, Freshy’s expert development team can help.
Contact us today to get professional support and improve your site’s performance and responsiveness.
