A MegaMenu is a type of drop-down menu in which the submenu items can be displayed in a multicolumn layout. Mega menus are often used on large scale websites, as they can show a large number of options at a glance. The two pictures below show the difference between a MegaMenu and a regular fly-out menu.
The examples below are offering some insight into what can be achieved with the OrionThemes mega menu.
Levels
With our MegaMenu you can display a 3 level navigation.
Columns
You can set the width of each MegaMenu Column relative to the whole MegaMenu container width.
Widgets
You can display almost any widget inside a MegaMenu by selecting a sidebar from the column settings.
The example above shows a 3 column MegaMenu, where the first 2 columns are set to 1/4 width, and the third column is set to 1/2 width, with an added custom sidebar. In this case we used Static Blocks to display the service list and image. An in-depth tutorial is coming soon on static blocks. Here you can see the MegaMenu column settings:
Hiding the titles
You can hide or/and disable the column titles. There are two checkboxes available for this (see the picture above).
- REMOVE LINK will make the first element (column title) not clickable.
- HIDE TITLE will completely hide the column title.
Mobile Behaviour
To ensure a better mobile experience the MegaMenu will display as a regular menu on small devices. Widgets will be completely hidden and the hidden column titles will become visible. See example below:
Global Settings / Theme Options
The MegaMenu functionality can be switched on/off in Theme Options, where there is also some customisation available. You can locate the mega menu settings inside the WordPress Menu.
On Dentalia Theme navigate to Theme Options -> Header & Menu -> Navigation Settings and scroll down to MegaMenu Settings.
On Recycle Theme navigate to Theme Options -> Menu and scroll down to MegaMenu Settings.
Background
You can set a custom background color and the text colors will adapt automatically. See example image below. Here we set the background color to white and all the text turned to dark text. This works vice versa. You can also use a background image, but keep in mind that the text color will only adapt if a background color is selected.
Link separators
You might want to change the separators from light to dark or completely remove them, as we did on the picture above.
Conclusion
MegaMenu gives you endless possibilities to create stunning navigations and give your visitors a better user experience. We hope you will like our solutions as much as we do. If you have questions, don't hesitate to ask. We are happy to answer them. And if you bump into a bug or experience any strange behaviour, please report it on our support desk, so we can investigate and fix it.
