Modifying Top Row Modules in Headers 9 – 20
Header Sections 9 – 20 include rows that use a combination of Blurbs, Menus, Social Follow and Button Modules. Here they are starting with Header Section 9 and ending with Header Section 20:
Because the default width has been maintained for the Row with the Menu Module (1080px), the top Row column uses hardcoded max-width and width settings to line up correctly with the Menu Row.
This technique enables the row to have a customizable fullwidth background color while still being positioned within one main Header Section. This is important for Sticky or Fixed options.
If you would like to use a fullwidth menu row then you can simply edit the the Custom CSS property to match your width values or you can remove the max-width and width setting and experiment with your own designs.
In the above screenshot, you can see how the max-width is set to 1080px and the width to 80% along with Flexbox properties to align the modules within it’s column.
You can also see how each Modules’s Admin label references – custom css Flexbox. This indicates the module has Divi’s built-in Custom CSS option via the
Settings → Advanced → Custom CSS
You can experiment with or remove those values or you can even remove the row entirely.
Add your existing custom designed to the Section.
I’m working on a juicy resource for using Flexbox with Divi which will be referenced soon!