Up to the actual DIVI version 2.5.6 there is a bug in the responsiveness of the sidebar when using the vertical navigation. When you shrink your browser window, you will see an odd behaviour of the sidebar between 980px and 1100px. At 1048px the widgets move below the content, but the main area shrinks and the empty sidebar and the sidebar separator stay intact until all gets into mobile menu mode at 980px.
Pondering a bit deeper into the issue itself, I found out that actually the content gets for my taste too narrow already at the breakpoint of 1100px, where the left-area is set to 450px. I would prefer simply:
– 1100px: sidebar moves below content (which it doesnt yet)
– 980px: vertical nav disappears into mobile nav (which is already working)
This way the content has a stable and comfortable width for best user experience. If you came across this post, you might have encountered this behaviour on your own site, and you can try it out live on this site here, which already works as I described by using this CSS fix:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/*** Vertical Nav Fix ***/ @media (max-width: 1100px) and (min-width: 981px) { .et_vertical_nav.et_right_sidebar #left-area, .et_vertical_nav.et_left_sidebar #left-area, .et_vertical_nav.et_right_sidebar #sidebar, .et_vertical_nav.et_left_sidebar #sidebar { width: 100%!important; } #main-content .container:before { width: 0px; } .et_right_sidebar #sidebar { margin-left: 0; border-left: none; } .et_right_sidebar #left-area, .et_right_sidebar #sidebar, .et_left_sidebar #left-area, .et_left_sidebar #sidebar { float: none; padding-right: 0; padding-left: 0; } } |
Did time move on and you found it fixed in DIVI itself? You have questions or comments or your own fixes? Let us know.
