Avada is one of the most widely used WordPress themes in existence, and it comes with its own built-in mega menu functionality. If you’re running Avada and considering Ruby Mega Menu, you’re essentially choosing to replace Avada’s native navigation with a standalone plugin.
That’s a reasonable choice — especially if you want navigation that survives a theme change — but it requires some care.
Disabling Avada’s built-in mega menu
Avada’s mega menu is tightly coupled to the Fusion Builder ecosystem. Before installing Ruby, you’ll want to disable or bypass Avada’s custom header elements that handle navigation. This usually means switching to a standard header layout in Avada’s options and pointing the primary menu location to Ruby.
Don’t try to run both in parallel. The CSS will conflict, the z-index will be unpredictable, and you’ll spend more time debugging than building.
Common conflict areas
The most frequent issue with Avada specifically is the fusion-main-menu class. Avada applies styles to this class that can cascade into adjacent navigation elements. Ruby’s CSS scoping handles most of this, but you may need to add a small override to ensure Avada’s link color and font styles don’t bleed in.
Avada also applies overflow: hidden in some header configurations, which clips dropdown panels. Check your header layout settings and ensure the header container allows overflow.
Z-index
Avada’s sticky header has z-index values that can overlap with Ruby’s dropdown panels. Ruby manages its z-index internally, but if you find dropdowns appearing behind Avada elements, this is the first thing to check. Avada’s header z-index is typically set in the Fusion theme options under Header.
Menu location
Register Ruby Mega Menu as a WordPress menu and assign it to the Primary Menu location. In Avada’s header settings, make sure this location is the one being used. If Avada is using a Fusion custom menu element, you’ll need to either replace it with the standard WordPress menu widget or use Ruby’s shortcode in a Custom HTML element in the header builder.
The result
Once the conflicts are resolved, Ruby works cleanly inside Avada. The advantage is clear: your navigation configuration is stored in WordPress’s menu system, not Avada’s options. If you ever move away from Avada, Ruby comes with you intact.