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
  • I. Create Astroid menu modules
  • II. Choose the Site Menu Method and assign module positions

Was this helpful?

Export as PDF
  1. Header
  2. Header

Site Menu Method

PreviousTransparent HeaderNextLogo Options

Last updated 10 months ago

Was this helpful?

Since Astroid 3.0.15, you can find a new feature about the site menu module that allows you to choose a menu display method. By default, the site presents the default Joomla menu directly.

However, thanks to the new feature, you can choose a menu module to present the menu. When you enable to display menu position, you'll see options to choose the module position for both desktop and mobile menus.

I. Create Astroid menu modules

Create a new module with the module type "Astroid Menu".

  1. Create Astroid menu module for site mode: Module position: assign the module to the position "Astroid-header-menu"

  • Select menu: Choose a menu.

  • Base item: Choose a menu's base item.

  • Start level: Set the menu's start level

  • End level: Set the menu's end level

  • Sub-menu items: Enable this option to show sub-menu items.

  • Menu mode: Choose a menu mode that you want to display the menu module on. (Choose Site).

  • Dropdown arrow: Enable this option to show the dropdown arrow beside a menu item containing sub-menus.

  • Animation duration: Set the length of time that an animation takes to complete one cycle.

  • Animation: Choose an animation from the drop-down list.

  • Easing: Choose an easing option.

  • Drop-down trigger: Choose a type of dropdown trigger (Hover or Click).

  • Menu breakpoint: Choose a breakpoint on which the burger button shows up.

  1. Create a new Astroid menu module for the mobile mode. Choose the menu mode "Mobile". Assign the menu module to the position: "Astroid-header-mobilemenu"

II. Choose the Site Menu Method and assign module positions

Go to Template options > Headers > Site Menu Method / Mobile Meu Method. Here you can choose the module position for the site and mobile menu methods.

  • Site menu method: Choose a menu method for the desktop menu: "Default" or module position.

  • Site module position: if module position is selected, you can choose a module position of the menu module you want from the drop-down list. (Choose the module position: Astroid-header-menu).

  • Mobile menu method: Choose a menu method for the mobile menu (Default or module position).

  • Mobile menu position: If the module position is selected above, you can choose a module position of the menu module you want for the mobile menu from the drop-down list. (Choose the module position: Astroid-header-mobilemenu).

Create a module with Astroid Menu type
Astroid menu module for site mode
Astroid menu module for mobile mode
Site / Mobile menu method