How to Create Joomla Mega Menu with Joomla CCK - website builder

Menu on the website is one of the most important things. It must be simple and comfortable to use. If you want to make your website more structured it is the right time to create mega menu. You can add many usefull things like images, videos, links, sliders and other.

Here is a simple example of Joomla Mega Menu with last blog posts. We will show you how to do it. It is super easy!

Joomla mega menu example in joomla website builder

Click on «menus» section. Here you can add new menu or manage all menu items.

create mega menu in website builder

You can add new items, edit items, delete them etc. Click «New» button to create a new item.

Joomla mega menu manager in joomla website builder

Now you can start creating! Choose a menu title, link will be created automatically. Select specific template style or use the default one.

Joomla mega menu details in joomla website builder

Click menu item Type and choose «OS CCK» and «Layout on Hover».

Joomla mega menu item choose type in joomla website biulder

Here you need to choose where this section must be: header menu or footer menu.

Joomla mega menu choose menu type in joomla website builder

After choosing «menu item type» new options section will be able. Here you need to choose what exactly will be in the menu. Also, now you can choose the position (right, left, center).

Joomla mega menu options in joomla website builder

Select a parent item or leave it default.

Joomla mega menu parent in joomla website builder

For this example we show «last posts».

Joomla mega menu select layout in joomla website builder

Now you can click «save» and enjoy your new creative menu!

To delete items you need to select an item and click «trash».

Joomla mega menu delete element in joomla website builder

How to add a width to the Joomla Mega Menu

You can add whatever you want to the mega menu, and if the content looks crushed, close menu manager, click OS CCK -> Layouts.

Joomla mega menu open layout

Then select the element you use, click Form -> Form Width and write a width you need (px or %), then the content will be shown correctly.

Joomla mega menu layout edit

Joomla Mega menu for mobile

To always show your mega menu correctly on mobile devices you can write a custom code in a css file or in joomla layouts.

To add a custom code to layout add "custom code" field -> click "field" and choose css code type. Then write down your code and save.

@media (max-width: XXXXpx){
.os_cck_menu_child{
display: block !important;
}
}
Where XXXX - is a width of the window.

Joomla mega menu for mobile

Now it would look like this.

Joomla mega menu for mobile devices

For more information about custom code check CCK - best joomla page builder article.

That's all! Now you can create your own Joomla Mega Menu on your website in a few minutes.

If you have any troubles or questions, you always can write to our team. Just fill this contact form and we will answer you as soon as possible.

Other documentations of Joomla CCK - website builder

- OS CCK - joomla field builder
- How to export data from the Joomla CCK - website builder
- How to import data in the Joomla CCK - website builder
- Ordasoft Content Construction Kit (CCK) Explanation
- Configuring Joomla CCK - website builder fields in different layouts
- How create Last added Instances module with help website builder - Joomla CCK
- Show Website builder - Joomla CCK layout with help OS CCK Layout module
- Create location map with Website builder - Joomla CCK
- How configure field access or show contact in Website builder - Joomla CCK
- Joomla CCK, community website builder
- How to show entity fields in Instances Manager, Joomla website builder!
- How to build a family tree in your website with website builder joomla cck