Full width submenu and percentage columns' widths

Full width submenu and percentage columns' widths

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.

Full-Width Submenu feature is available in the DJ-MegaMenu Professional Edition 3.5+

Let's start to setup full-width submenu.

First level menu item options

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 .


Default column width

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:

 

   
/* full width submenu */ .dj-megamenu- {theme} li.dj-up.fullsub { position: static !important; } .dj-megamenu- {theme} li.dj-up.fullsub a.dj-up_a { position: relative; } .dj-megamenu- {theme} .djsubrow_separator { clear:both; border-bottom: 1px solid #3a3a3a; padding: 0 0 20px; margin: 0 0 20px; }

 Remember to replace {theme} with your theme name or word 'override' in case you are using override from template option. 


If you are using Joomla-Monster template and  override from template theme option you may need to add the above css to {yourtemplate}/less/custom.less file or just update your template if there is the new version available.


That's it!

Now, this submenu width is equal to the menu bar width and it's fully responsive.


Please feel free to leave a comment below if you have any question or something is unclear.

    Please note that a new version of the knowledge base is available at 
    https://dj-extensions.com/knowledge-base


      • Related Articles

      • How to display multiple columns in submenu?

        First of all, make sure you have the DJ-MegaMenu system plugin enabled ( Extensions > Plugins > Search “DJ-MegaMenu” > Status must be “ enable “ ) For example we create module with Main Menu(1) and we display is on top-menu-nav position (2). In next ...
      • How to create full-width slider in DJ-MediaTools ?

        You can set up the slideshow to display on whole window width. First of all, you need to choose proper module position in your Joomla template which is 100% wide. If you are not sure if there is such module position you can contact your template ...
      • How to display multiple columns with modules and headings in submenu?

        First of all, make sure you have enable DJ-MegaMenu system plugin. ( If disabled, enable it) Extensions > Plugins > DJ-MegaMenu system plugin Go to your actual menu and create new menu item. Menus > Your menu name > Add New Menu Item and press “ + ...
      • Extended Products Grid - Columns options

        Navigate to the "Settings" tab. To configure the columns options, click the "Columns" button. You will see the following options: Those options allow changing a number of grid columns depending on which device the user is using.
      • How to add the background to the submenu

        DJ-MegaMenu comes with a built-in functionality that allows displaying a background image for a submenu of each menu item. To do that you need to follow few easy steps: I assume that you already have the DJ-MegaMenu module installed and published on ...