How to Configure Megamenu of Plazart Framework in a Joomla! site?

There are a range of important steps to do in order to setup a website using Plazart Framework, and one of them is to configure Megamenu.

Today, let’s learn more about how to use Megamenu.

You can watch the videos for better demonstration.

Plazart Framework uses 3-level Megamenu configuration, including: Menu item setting, Sub-menu item setting and Column setting.

Please make sure you have a menu system ready to use and have Plazart Framework installed in your site.

I. For General Page Layout

1. Menu Item Setting

Please go to Extensions > Template Manager, and open a template layout you want to configure the Megamenu.

Next, in tab “Mega Menu”, please find section “Megamenu Configuration”.

Select a menu to configure, then you will see the menu items of the menu display like this:

After that, please click a menu item, you will see the setting for it.

4 things to notice:

  • Submenu: You can set to show/hide sub-menu items of this menu.
  • Extra Class: You can add class here. This option is meant to make it more convenient for developers to write css.
  • Icon: You can insert icon for the menu item to make it look livelier.

      Please follow this link to get the icon you want: http://fontawesome.io/icons/

  • Item Caption: You can add a short description for the menu item here.

2. Sub-menu Item Setting

Please click the green area to move to sub-menu item configuration.

You can see the image:

When configuring sub-menu item level, you should pay attention to the following points:

  • Add row: You can add more row(s) by clicking “+” button.

        

If you want to delete a row, please select it and click “−” button.

  • Sub-menu Width: You can change the width for the sub-menu items.

  • Alignment: You can align the sub-menu items to left, right, center or justify.

  • Extra Class: You can add class here. This option is meant to make it more convenient for developers to write css.

3. Column Setting

For this configuration, you should focus on:

  • Add/Remove Column: Please click “+” to add a new column.

 If you want to remove a column, you need to select the column first, then click “−” button.

After adding a new column, you can configure Width, Module and Extra Class.

  • Width: You can set the width of the column (in span).
  • Module: Please select a module you want to display in the column.

You can select the available modules.

If not, you can go to Extensions > Module Manager and create a new module/publish an old one.

After that, you can go back to the setting and select the module normally.

Below is an example:

  • Extra Class: You can add class here. This option is meant to make it more convenient for developers to write css.

NOTE: If your menu item has quite a lot sub-menu items, you can separate them into columns by changing the position for some of the sub-menu items.

To do this, please select a sub-menu item, then you will see section "Position".

You can move it to the left by clicking the left arrow button and move it to the right by clicking the right arrow button.

After that, you can change the width for each column in Column Configuration normally if you would like to.

Please see the following images as an exapmle:

II. For One Page Layout

For one page, please follow the steps as below to configure Megamenu and watch the video by clicking the following button for more details:

One Page Layout's Megamenu in PLazart Framework

In this article, we take TemPlaza’s Titania template as an example.

Please go to Extensions > Template Manager and open layout “tz_titania_joomla - One page”.

Next, in tab Mega Menu, please select menu “One Page” for section “Megamenu Configuration”.

You can configure like Menu item setting for general page layout.

However, for each menu item, you need to set a position for it in section “Direction”.

In your front end of site, when you click a menu item, the page will automatically scroll to the position you set for it in “Direction”.

I hope that this tutorial helps you use megamenu easily. If you have any problem with it, feel free to contact us for more support.

Thank you for reading and watching :)

Safer PHP Version for Joomla 3 – Highly Recomend
Let Us Hear Your Voice

Search Blogs

Latest Blogs

07 December 2018
News
WordPress 5.0 is now available for downloading on wordpress.org. As an announcement a few months ago, some changes are included in this major release; however, in this article, we are going to focus on the biggest improvement - a new visual editing s...
03 December 2018
Tutorials
Hiding a post or page from your home page or other places on your website seems ridiculous especially for bloggers. However, sometimes, you may have lots of categories and desire to show one of them only. Or for some others, they want to show some in...
29 November 2018
Tutorials
When you work with a plugin that requires Facebook API, especially showing your Facebook feed or Facebook Images on a website, Access Token is needed. In this article, we are going to give you detail instructions to get a Facebook Access Token never ...
28 November 2018
News
Articles
If you have planned to start your website with Joomla then I must say, it's supremely great decision. If you know that Joomla! Joomla 3.9.1 has recently been released. It's a security release for series 3.x, which offers quite good improvements ...
28 November 2018
News
Hello,Firstly, we would like to express our big thanks to all of our beloved customers and followers accompanying with TemPlaza in past time. Today we're writing this post to briefly announce that we will stop supporting some old Joomla templates on ...