Latest Blogs

News
Dear beloved friends and fans!First of all, I hope you're staying healthy and staying safe in your place. The world has been experiencing a tough time because of the COVID-19 pandemic. As you know, TemPlaza did start the support c...
342 Hits
Articles
It is obvious that a great event website easily convinces potential attendees and effortlessly engages them to join your event. This is true for both event websites and other ones in other fields. So how can you create a perfect event website ...
471 Hits
Articles
Shopify is concerned as a leading eCommerce platform that offers such a bunch of stunning features to boost your business activities. Building a beautiful and attractive photo gallery is a good way to show off your products, dedicate works to visitor...
440 Hits
News
Hello guys,We are extremely excited to inform you that a new version of AutoShowroom WordPress Theme has already been released - version 1.9.3.Autoshowroom is known as an ultimate solution for car dealership websites. However, to make it become more ...
486 Hits
News
First and foremost, I hope you're doing well there and wish all the best for you and your family, as well as your beloved people. As we all know, the threat of Coronavirus is looming all over the world, which has not only had a negative influenc...
979 Hits

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