DJ-MegaMenu allows setting the submenu of the first level menu item to be 100% menu wide and define the columns' widths in percents instead of pixels. This is a great option which can improve your mega menu layout and makes it fully responsive at the same time.
Let's start to setup full-width submenu.
All the submenus have fixed width by default, to change it for desired menu item submenu you need to go to its settings in the Joomla Menu Manager . Open DJ-MegaMenu Options tab, enable Full-Width Submenu option and save the changes.
Now you need to divide submenu of the menu item from the last step into columns. It's as simple as going to the submenu item settings and check the option to start new column from this menu item. Here you can also change the default column width by typing width in percents.
When the sum of the columns' widths will reach the 100% then the next row will be added automatically and next columns will be placed in the new row. It gives you possibility to set rows and columns in the way you need. Remember that you can also publish the modules in the submenu columns .
The column width option in the last step is optional. You can leave empty field and then the default column width will be used for the new column. You can change the default column width in the module options. Please go to the Joomla Module Manager, open the DJ-MegaMenu module settings and go to Mega Menu Options tab. Adjust the Percent column width at the bottom of the first section of the parameters. pdating mega menu theme
In case you've created your own menu theme you need to update it with the following CSS:
Remember to replace {theme} with your theme name or word 'override' in case you are using override from template option.
Now, this submenu width is equal to the menu bar width and it's fully responsive.