Skip to content

8. Mega Menu

Jump to bottom
Jessglynne edited this page Nov 15, 2021 · 1 revision

Configuring the Mega Menu in astroid is really simple & straight forward. With just a few clicks, you can get a great looking mega menu. The First step is to configure the Menu and select the header layout for your site, see the below screenshot that explains a bit on how to enable the menu in the header.

  1. Enable or Disable the header. The header contains your website's Mega Menu, Logo, Mobile menu, Sticky Header and all other associated items. It’s best to keep it. If you plan to have a custom header then you can disable this. The Header is just a module position in the layout manager. You can move it around just like other sections/module positions. This gives you the possibility of having a header/menu anywhere in your layout.
  2. The Module Position is where your header will be published. At this module position, the Header will be shown at frontend. This position must be selected as the layout manager in order for the header to work. By default, it is already set up and works just fine.
  3. There are 8 possible layouts for the header and you can choose the one you prefer.
  4. Few header layouts have the possibility of publishing a block in the header. It can either be HTML content managed from Astroid or a module position. Based on the selected header layout, you might see one or two block options there.
  5. This is the name of your menu in the Joomla menu manager. This will serve as the Megamenu for your website.
  6. If you don’t want to display the whole menu, you can select its end level and it would only show the menu items up to that particular level (this functions just as the Joomla core menu module. In the newer version of Astroid, you also have the option to select the start level).

Once you are through with these settings, you can work on creating your own Mega Menu for individual menu items. The structure of the main level menu items will be the structure of your Joomla menu and by default, all submenu items are automatically displayed as dropdown menu items.

To create a Mega Menu for any menu item, choose the Menu and then the Menu item for which you’d like to set up the Mega Menu.

After choosing the desired Menu item, navigate to the Astroid Menu Options tab there.

  1. Enable or Disable Mega Menu for this Menu item Once enabled you can create the Mega menu by adding rows and choosing its columns/grid.

After adding the row, you can then easily add its content.

The content can be:

Modules published in the Module Manager. Sub menu items of the Menu you are editing.

  1. Enable or Disable Icon only if you’d like the Menu item to display only as Icon, Your menu item would look something like this (home icon on the left)

  1. Add a subtitle for your menu item. Your menu item would look something like this

  1. Choose an icon for the menu item from the given list of font-awesome Icons available in Astroid. By default, the icons appear to the left of menu item text.
  2. Add a custom class for providing custom styling to the menu item.
  3. Choose the width of the Mega menu dropdown for your menu item.
  4. Choose the alignment for the opening & closing of the dropdown (left, center or right). You can select Container to make it the full width of your container and Full to have it edge to edge.
  5. Enable an additional Badge on your Menu item, you can see the Hot badge in the following picture. You have the ability to configure the text, text color and background color of the badge

Clone this wiki locally