Some sites utilize a "mega dropdown menu" [aka megamenu] for each of the main menu items/tabs on desktop viewports.  A megamenu is a dropdown that has more than one column of information, some of which may be calls to action or signup forms.

 

---

Managing the Mega Dropdown Menu Layout

To help site managers better be able to visualize and manage the menu layout, the Drupal module "TB Mega Menu" is installed and configured.  Below are instructions for managing the megamenu shown on desktop and mobile menu.

1. Site administrators / content managers with menu editing privileges should go to Structure > TB Mega Menu. 
2. In the list of menus that appear, click CONFIG next to "menu-primary-pca-menu/Primary PCA Menu"
3. This will load the general Config TB Mega Menu page as shown below.
4. On the config page, you'll be presented a "MegaMenu Toolbox" [configuration panel] at the top of the screen for adjusting animations, adding css classes, and more.  Depending on what MegaMenu element is selected, the toolbox will show different options (as demonstrated by the screenshots below). Changes to any of these settings should always be tested on a dev or staging environment and not applied to the live site immediately, as megamenus often require custom css and positioning of elements.

   

   

   

   • While the interface appears to allow for drag and drop capabilities- in actuality, everything must be set via the configuration panel.  The configuration panel will change depending on what element is selected.
   • The wireframe presentation should provide a similar layout to the actual rendered dropdown menu (number of columns, display order of items and blocks, etc).
5. Reverting or Saving your Mega Menu changes in progress
   • Use the red RESET button to revert your changes to the last saved state.
   • Otherwise, when finished, be sure to click the SAVE button.  After saving any changes, you may need to clear Drupal's caches and refresh the respective pages of the site to see changes kick in.

---

Navigating the MegaMenu Interface 

Following the initial install of the TB Mega Menu Module, or creation of a new TB Mega Menu object, you'll have a blank canvas with all your top level menu items representing individual columns/mega dropdowns as indicated in the screenshot below.

Before customizing your layout, be sure you have a clear understanding of how the items you want in the menu align if they were represented in a table/spreadsheet (potentially with merged rows and columns).  This will significantly help determine how to get the layout you desire in the canvas.

 

NOTE:  multiple menu items can be placed in a single row or column container, but only one block can be placed in a row or column container.

---

Common Menu Layout Tasks

Adding Blocks to a Mega Dropdown

Blocks can only exist in their own individual column or row.

Click on the container of a mega dropdown. Select an empty row or column container.

While it is selected, click the selector under Blocks to see a list of all the site's blocks (both statically created content blocks and those generated by other Drupal features such as views or webforms).  Find and select the one block you want.

After selection, the container will indicate which block is assigned to it.

 

Removing Blocks from a Mega Dropdown

To remove blocks from a Mega Dropdown, click on the block container.

While it's selected, click the "x" next to the block name in the Blocks selector.

 

 

Adding & Removing Rows within a Mega Dropdown

Click on the container of a top level menu.  Then, click the "+" to indicator under Add Row to add a row in that container.

To remove a row, click on the row container.  The top control panel will show the "Column Configuration" toolbox- but it applies to the entire row too.  Now click "-" under Add/Remove Column to remove the row.

 

Adding & Removing Columns within a Mega Dropdown

Click on the container of an existing column.  Click the "+" indicator under Add/Remove Column to add a column to the right of that existing column.  Click the "-" indicator to remove the actively selected column.

Changing Column Widths within a Mega Dropdown

Each megadropdown is divided into 12 equally sized units.  Column widths must be defined such that they add up to exactly 12 units wide (the total width of the mega dropdown).  Some example configurations:

• 4 unit wide column and an 8 unit wide column
• 6 unit wide column, 6 unit wide column
• 4 unit wide column, 4 unit wide column, 4 unit wide column
• 3 unit wide column, 3 unit wide column, 3 unit wide column, 3 unit wide column

Click on the container of an existing column.  Set the column width using the selector under Grid.

 

Moving blocks or menu items between columns within a Mega Dropdown

Click on the container of the individual menu item or block.  Use the left and right arrow controls under Break Column to move the selected item one column left or right. 

 

Rearranging / Shuffling Entire Columns

Unfortunately TB Megamenu does not allow moving entire columns left and right of each other. 

To accomplish such a task, you would need to do the following combination of tasks:

1. Insert a new empty column (which will be in the desired position) to the right of its respective left neighbor.
2. Select the existing menu items or blocks and shift them via Break Column to the new empty column.  Repeat this step until you now have your desired Left to Right display order and an empty column that can be deleted.
3. Select the empty column and delete it.

Description	Example 1	Example 2
You have	[Col A] [Col B] [Col C]	[Col A] [Col B] [Col C]
You want	[Col A] [Col C] [Col B]	[Col C] [Col A] [Col B]
First Step: insert new empty column(s) (the bolded column is the one to select before clicking add column)	[Col A] [New Col] [Col C] [Col B]	[Col A] [Col B] [Col C] [New Col] [Col A] [Col B] [Col C] [New Col] [New Col]
Repeated Step:	[Col A] [items shifted from Col C] [Col C] [Col B]	[Col A] [Col B] [Col C] [items shifted from Col A] [new Col, empty] [old Col A, empty] [Col B] [Col C] [new Col A] [new Col, empty] [old Col A, empty] [Col B] [Col C] [new Col A] [shifted items from Col B] [old Col A, empty] [old Col B, empty] [Col C] [new Col A] [new Col B]
Second to Last Step: after shuffling your items into the desired order, you should have at least one empty column that can be deleted (indicated in bold)	[Col A] [New Col C] [Col B] [Old Col C]	[old Col A, empty] [old Col B, empty] [Col C] [new Col A] [new Col B]