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](https://ordasoft.com/images/mega-menu/mega-menu-example.jpg)
Click on «menus» section. Here you can add new menu or manage all menu items.
![create mega menu in website builder](https://ordasoft.com/images/mega-menu/create-mega-menu.jpg)
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](https://ordasoft.com/images/mega-menu/mega-menu-manager.jpg)
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](https://ordasoft.com/images/mega-menu/mega-menu-creating.jpg)
Click menu item Type and choose «OS CCK» and «Layout on Hover».
![Joomla mega menu item choose type in joomla website biulder](https://ordasoft.com/images/mega-menu/mega-menu-item-type-choose-hover.jpg)
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](https://ordasoft.com/images/mega-menu/mega-menu-choose-type.jpg)
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](https://ordasoft.com/images/mega-menu/mega-menu-options.jpg)
Select a parent item or leave it default.
![Joomla mega menu parent in joomla website builder](https://ordasoft.com/images/mega-menu/mega-menu-parent.jpg)
For this example we show «last posts».
![Joomla mega menu select layout in joomla website builder](https://ordasoft.com/images/mega-menu/mega-menu-layout.jpg)
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](https://ordasoft.com/images/mega-menu/mega-menu-delete-element.jpg)
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](https://ordasoft.com/images/mega-menu/mega-menu-open-layout.jpg)
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](https://ordasoft.com/images/mega-menu/mega-menu-layout-edit.jpg)
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](https://ordasoft.com/images/mega-menu/mega-menu-for-mobile.jpg)
Now it would look like this.
![Joomla mega menu for mobile devices](https://ordasoft.com/images/mega-menu/mega-menu-mobile-example.jpg)
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.