This blog tutorial for learning how to create mega menu in Helix framework.
Mega Menu is very easy to create beautiful and customized menus for your website, also with modules inside. In additional, it also boosts SEO and user engagement. So in this post, we will show you how to Set Up Mega Menu In Helix III Framework.
Firstly, in template setting, you have access to 4 options only, more advanced settings are “hidden” in Menu Manager inside each menu item, check out!
SELECT MENU
You can choose menu from available in your system. And if you’re gonna build multilingual site in Joomla 3.4, then you have to create clone of current template for each addcional language and choose here a Main Menu for each of them.
MENU TYPE
There are enabled two separate menus: Mega Menu and Off Canvas Menu [=] ( sometimes it’s called Hamburger Menu). You can use both or only one of them.
Off Canvas Menu is external menu module, so you have to create a menu module if you wanna use this area. Don’t forget to choose “offcanvas” module position for them.
What is more important in this sidebar menu you can also publish not only menu modules, but also for example Search module, it also have to had a “offcanvas” position chosen in Module Manager.
HOW TO DISABLE OFFCANVAS MENU IN DESKTOP
To disable Off Canvas [=] menu from desktop view only (!), select “Mega Menu”, you’ve done.
MENU DROPDOWN WIDTH
Dropdown Menu Width value would be to set it to the width of your submenu size content area. By default 240px.
MENU DROPDOWN ANIMATION
MegaMenu offer four transition options for your dropdown submenus:
No Animation
Fade
Zoom
Fade In Up
Elastic
Slide Down
Drop In
Twist
You can set this to None (No Animation) to have the submenu appear with no fancy effect.
MENU ITEMS FONT SIZE
In current version of template you can do this using custom css code:
.sp-megamenu-parent > li > a {font-size:14px;}
by default we used font-size :12px, so 2px more means bigger letters and so on.
OFF CANVAS MENU CUSTOMIZATION
To change color of Off Canvas (mobile) Menu icon [=] (which may be white or black by default), follow custom CSS code, in this example we chosen red:
#offcanvas-toggler > i { color: red !important; font-size: 32px; }
To change color of Off Canvas menu items, you can try example custom CSS code:
.offcanvas-inner .sp-module ul > li > a { color: red; }
.offcanvas-inner .sp-module ul > li > a:hover { color: blue; }
In this example we chosen red for links and blue for links with :hover selector – when you mouse over them, try with other name or hex colors as well.
HOW TO ADD BACKGROUND COLOR / IMAGE TO DROPDOWN MENU AREA
First you have to know that it request a custom CSS code.
You just follow this CSS code:
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
background: #22b8f0;
padding: 15px;
}
Next, to add background image, you have to add more parameters to background property. The background and background-image property in CSS applies a graphic (PNG, JPG, GIF, SVG and data URI) or gradient to the background of an element. The url() value allows you to provide a file path to any image, and it will show up as the background for submenu area.
Image background example code:
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
background: #22b8f0 url(https://domain.com/images/menu_bg.png) no-repeat scroll 0 0 / cover;
}
You can declare the background of an element to be a solid color in CSS or image, However, using gradients declared in CSS3, rather using an actual image file, is better for site performance.
Gradient sub menu background example code:
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
background: #a048b9 linear-gradient(140deg, #a048b9 0%, #a048b9 10%, #9845b0 10%, #9845b0 20%, #8c40a3 19%, #9041a6 21%, #9041a6 20%, #9041a6 30%, #853c99 29%, #883e9d 31%, #883e9d 30%, #883e9d 40%, #7d3990 39%, #803a94 41%, #803a94 40%, #803a94 50%, #753587 49%, #78368b 51%, #78368b 50%, #78368b 60%, #6d317e 59%, #703381 61%, #703381 60%, #703381 70%, #652e74 69%, #682f78 71%, #682f78 70%, #682f78 80%, #5d2a6b 79%, #602b6f 81%, #602b6f 80%, #602b6f 90%, #552662 89%, #582866 91%, #582866 90%, #582866 100%) repeat scroll 0 0;
padding: 15px;
}
SEARCH IN OFF CANVAS MENU
And now, if you want to add search module inside Off Canvas Menu, you need to do some thing below:
- Create New or Edit current search module (in Module Manager)
- Disable Module Title (probably you do not need it there)
- Change/Choose its position to “offcanvas”
- Assign to all or selected subpages (menu items)
- Publish module
Don’t forget that Menu should be the most important part there, so put it as a first or second position in the module order.
How to config mega menu with multi columns?
You can refine mega menu columns via details of parent menu item, by open parent menu via Admin > Extensions > Menu Managers > your parent menu item, open tab “Helix Menu Options”, you will see option below
- Dropdown Position – allows you choose align (left/right) dropdown position.
- Show Menu Title – allows you to hide menu item title, this may be useful when you want to show only icon instead full title like for Home position.
- Menu Icon – the use of icons beside menu items is a fantastic alternative that favors a quick visual option identification; and even the use of icons without text to accompany is viable. You can use font icons based on Font Awesome v4.3, it means that you have big collection of 519 icons to choose from.
- Custom CSS Class – allows you to add Custom CSS Class(es) to this menu item.
Then, you continue open tab “Helix Megamenu options” in order to generate content and layout for your menu structure
In above screen, you can create columns for menu, then drag-drop content for each columns with modules.
Manage layout for column by click to button ‘Manage Layout’, you can define left, right, center and full layout for menu content.
You also can define menu columns with menu structure that based on parent and child menu item, example with structure below (back-end)
and you can see result on front-end here
Conclusion:
Setup menu/canvas and mega menu structure in Helix framework is quite easy, you can select show/hide menu and canvas menu via Template Settings > Menu. And you can generate mega menu columns and content via details of parent menu item that you want to show with dropdowm menu in multi column.
Thanks for your reading, and if you have any questions with this blog, don’t hesitate to let us know by leaving a comment. ?
- Web App Vs Progressive Web App: Why Are They Different - June 30, 2022
- 3CX Vs Help Scout: What are the differences - June 20, 2022
- List Of 7 Best WordPress Video Conference Plugins 2022 - June 16, 2022
Hi Guys
We have built a website for a client and need to be able to add a separate background colour on hover and active for three menu items with the same parent.
It is the three items under Expertise. Is it possible to make the first item’s background red on hover, the second orange and the third blue?
Hope you can help. I have looked long and hard for a solution, but without success. The only thing I did manage was to assign a class to the menu items, but then their backgrounds are static without the hover affect.
For each menu item, you will see option Link Class, just add and based on this class, you can define different background for them.
Hello,
In regards to changing the menu font size, i tried adding the code to the template.css but for some reason nothing was happening, no changes were being applied. Any solution as to where did I go wrong?
Can you send me your site address? So, I can take a look and suggest you CSS.
I tried every option you suggested at my corporate website, and it rocks now! I will aply background color in helix menus at every helix3 website I use. Thank you so much.
You’re welcome 🙂
i am using a template called news247 . im trying to link my own k2 category of articles so it can show up in the mega menu with the nice little images but its not working for me…http://themewinter.com/joomla/news247/
under lifestyles they have food,health and the articles are showing up with the images when i create my tabs nothing is showing up for me using the helix menu
i appreciate any help given.
i manage my layout for 3 column, but when i save its became only 1 column. default setting ?
Click button ‘Reset column’, then recheck.
i have Joomla 3.8.10 with Vertumart 3.2.12 temp we using helix 3.
offcanvas menu appears of mobile in the first page only, in all other pages the menu disappeared.
any suggestions?
Can you send me your site URL? So, I can help.
http://www.crownck.com
i send the site did you get it? http://www.crownck.com
Look like it’s a bug with template, please contact template author to solve it.
Hi friends! At this manual has got all about change menu, but not – how change main menu color in css code for paste. Tell me code pls..
Thank you for your info.
Which template are you using? You can let me know so I can provide details CSS. This is just details guide how to set up mega menu, not customize menu style.
Hello friends,
I’m desperate.
By all means, I’m not able to have my menu with submenu displayed in colums.
Please help.
Best regards,
Gerd
Hi,
What template name are you using? So, I can help.
Hi there, sorry for the long time. I didn’t recognize, you had answered.
I’m using the LT_school template and I’m absolutely desperate. It won’t accept my settings; it alwas resets the width of mega menu to 600, no matter what I put in there. Also, it won’t display the submenu items at all. I can give you access to the backend, if needed.
http://www.cavallarariccardo.net/?tp=1
I modified the template by dividing the title field into 2 parts, the idea was to place the Main Menu in that position and see it vertical ………..
Unfortunately, if I place the Main Menu in that position, it just SPREADS!😕
How can I get a VERTICAL menu ???
Thank you,
Hi,
I replied you via email, just disable mainmenu module via Module Manager, then go to Template Settings > Menu, and select your Mainmenu to load it.
Hello There! nice tutorials.
Just wanted to ask, if Helix3 Mega Menu can add a preview article?
lets say a list of updated news article with image for the latest one on the list.
all of these in a menu
Thank you, unfortunate it’s impossible. We noted and suggest it for team on next time.
Hi,
I cannot manage to fix the Off Canvas (mobile) Menu icon [=] position.
Currently, it appears right in the menu line, but not in the middle (oriented towards the bottom).
My logo instead (displayed link) is centered, so the logo alignment does not match the menu icon’s one.
Any idea of what Custom CSS I could use?
Many thanks
Hi,
What template name are you using? If you use our template, just submit ticket support with your site URL and admin login, so we can help.
Hi there,
Is it possible to, instead of using an off-canvas menu, have the menu use a mobile friendly accordion type menu with all the modules visible on a mobile device?
You can use any module, then just set it at position ‘offcanvas’.
Hi. Can we define different typography for different home pages in the same template?
Sure, you can do it. Just browse new page or use page builder to build layout for your new homepage.
Hello Kevin,
I am struggling with Helix3. I did select the menue in the template definition, but I cannot see the “Helix” tabs in the menu manager. Is there any “trick” I have to deal with to make them visible?
any help would be fabulous.
cheers
Ruediger
Make sure that you already enable two Helix Plugins via Plugin Manager.
Yes, thank you.
The HELIX3 plugins were not actually installed in the joomla instance. I did install them successfully from here:
https://github.com/JoomShaper/Helix3/archive/master.zip
I then had to manually fix a bug in “plugins/system/helix3/helix3.php” on line 55, where the $data is treated as array, although it is an object of stdClass…
and now this works!
Thanks again for your insight!
cheers
Ruediger