Astroid Framework
HomeDownloadReport an IssueVideo Tutorials
English
English
  • What is Astroid
  • Get Started
    • Introduction
    • Technical Requirements
    • Installation
    • Layout Manager for Dummies
    • Creating a basic Astroid Template
  • Astroid Pro
    • Using the License Key
    • Dynamic Content
  • Basic Settings
    • Preloader
    • Favicon
    • Back to Top
    • Wide Vs Box Layout
    • Smooth Scroll
    • Color Mode
    • Container Background Mode
    • Bootstrap Settings
  • Header
    • Header
      • Transparent Header
      • Site Menu Method
    • Logo Options
    • Sticky Header
    • Off-Canvas menu
      • Customize the Offcanvas icons
    • Animation
  • Color
    • Body Color
    • Header Color
    • Sticky Header Color
    • Main Menu Color
    • Dropdown Menu Color
    • Off-Canvas Colors
  • Layout Settings
    • Section Settings
    • Row Settings
    • Element Settings
    • Column Settings
    • Layout Configuration on devices
    • Sub Layouts
  • Astroid Widgets
    • Divider Widget
    • Navigation Widget
    • Icons Widget
    • Button Widget
    • Heading Widget
    • Text Widget
    • Image Widget
    • Slideshow Widget
    • Image Group Widget
    • Testimonials Widget
    • Articles Widget
    • Accordion Widget
    • Grid Widget
    • Form Builder Widget
    • Map Widget
    • List Widget
    • Video Widget
    • Video Button Widget
    • Image Carousel
    • Countdown
    • Raw HTML Widget
    • Module Position
  • Astroid Widgets Pro
    • CodePen Widget
    • Hover Motion Gallery
    • Article Listing
    • Listing Pro
    • Count Down widget
  • Image Motion Cursor
  • Typography
    • Body Typography
    • Menu Typography
    • H1-H6 Typography
    • Drop Down Menu Typography
    • Custom Typography
    • How to use local font
  • Article Blog
    • Article Layout Builder
    • Article Listing Options
    • Single Article Options
    • Blog Options for Single Article view
    • Blog Options for Articles List View
    • Open Graph
    • Custom type comment for Blogs/Articles
  • Social Profile
    • Social Profile
  • Custom Code
    • Tracking Code
    • Before </head>
    • Before </body>
    • Custom Css
    • Custom JS
  • Miscellaneous
    • Lazy Load Images
    • Coming Soon
    • Error Page
    • Copyright
    • Contact Information
    • Minify JS/CSS/HTML
  • Theming
    • Theming
  • Menu Item Settings
    • Blog Options
    • Banner Options
    • Open Graph Options
    • How to manage the Blog Options for Articles List View
  • Mega Menu
    • Mega Menu
  • MORE
    • Preset Profiles
    • Astroid Layout Module
    • Astroid Captcha
  • Developers
    • Get Started
    • Build or Override a Widget
Powered by GitBook

© Astroid Framework 2025.

On this page

Was this helpful?

Export as PDF
  1. Mega Menu

Mega Menu

PreviousHow to manage the Blog Options for Articles List ViewNextPreset Profiles

Last updated 2 years ago

Was this helpful?

The First step is to configure the Menu and select the header layout for your site, see the below screenshot that explains a bit about 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 front end. 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 Megamenu 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.

  • Submenu items of the Menu you are editing.

2. 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)

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

4. 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 the menu item text.

5. Add a custom class for providing custom styling to the menu item.

6. Choose the width of the Mega menu dropdown for your menu item.

7. 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 its edge to-edge.

8. 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

More on Header Layouts in the following video ->

CLICK HERE