We're passionate about creating premium WordPress themes.

Introducing the OrionThemes Mega Menu

What is a MegaMenu?

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.

A multicolumn mega menu
A regular fly-out menu

How to create a MegaMenu?

Our themes come with a native, built-in MegaMenu functionality, taking advantage of the Bootstrap grid & widgets. The video below shows you how to turn the Services fly-out menu into a MegaMenu on Dentalia WordPress Theme.

You can create a simple MegaMenu with a single click of your mouse. If you imported the demo content, simply navigate to Appearance -> Menus in your WordPress Dashboard, cklick on the Services menu item and check the Megamenu box.

The possibilities

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.

Megamenu levels

Columns

You can set the width of each MegaMenu Column relative to the whole MegaMenu container width.

Different column widths

Widgets

You can display almost any widget inside a MegaMenu by selecting a sidebar from the column settings.

MegaMenu with Sidebar

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:

MegaMewnu 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.
Hidden megamenu column titles

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:

Mobile Menu: Services (the third column with the sidebar is hidden), Elements (the hidden titles are now visible)

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.

Theme Option 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.

Megamenu with light background and removed link separators

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.

Was this article useful? 1

Orion

Living the WordPress Magic.