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.
- Enable or Disable the header. The header contains your websites 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.
- 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 in the layout manager in order for the header to work. By default it is already setup and works just fine.
- There are 8 possible layouts for the header and you can choose the one you prefer.
- Few header layouts have the possibility of publishing a block in the header. It can either be an HTML content managed from Astroid or a module position. Based on the selected header layout, you might see one or two block options there.
- This is the name of your menu in the Joomla menu manager. This will serve as the Mega menu for your website.
- 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).
More on Header Layouts in the following video:
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 sub menu 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 setup the Mega Menu.
After choosing the desired Menu item, navigate to the Astroid Menu Options tab there.
- Enable or Disable Mega Menu for this Menu item.
The content can be:
- Modules published in the Module manager.
- Sub menu items of the Menu you are editing.
- Enable or Disable Icon only if you’d like the Menu item to displayed only as Icon, Your menu item would look something like this (home icon on the left) .
- Add a subtitle for your menu item. Your menu item would look something like this .
- Choose 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.
- Add a custom class for providing custom styling to the menu item.
- Choose the width of the Mega menu dropdown for your menu item.
- Choose the alignment for the opening & closing of the dropdown (left, center or right). You can select Container to make it full width of your container and Full to have it edge to edge.
- Enable an additional Badge on your Menu item, you can see the Hot badge in the following picture. You have the ability to configure its text, text color and background color of the badge
And that’s about it, this how you would configure Mega Menu in an Astroid Framework Template.
Here’s a quick video on how to configure the Mega Menu