Theme Integration

Ruby Mega Menu connects to your theme in one of two ways: automatically via your theme's menu locations (classic themes), or via shortcode (Full Site Editing themes).

Popular Classic themes — menu locations

Most WordPress themes register one or more menu locations — named slots like "Primary Menu" or "Header Menu" where a menu can appear. Ruby Mega Menu auto-detects these locations.

  1. Open Ruby Mega Menu → Settings in the admin sidebar.

  2. Scroll to the Integration section. You'll see a list of every menu location your active theme has registered.

    Menu location checkboxes
    Figure 1 Ruby Mega Menu auto-detects your theme's menu locations.

  3. Check the location(s) where you want Ruby Mega Menu to appear, then click Save Settings.

  4. Visit your site's front end. Your theme's default menu will be replaced with Ruby Mega Menu in the selected locations.

Tip You can enable Ruby Mega Menu in multiple locations at once — the same menu will render in each selected location, styled consistently via the settings panel.

If you don't see menu locations:

If you are using popular themes (i.e. Avada, The7, etc.), but you still don't see menu locations, follow the instructions below:

  1. Open Appearance → Menus in the Wordpress admin sidebar.

  2. Create a new menu location.

    • (1) Name it as you want (i.e. My New Menu).
    • (2) Select "Main Navigation", or your theme's specific Main Navigation name from the list.
    • (3) and Save it.
    Menu location creation
    Figure 2 Creating menu location.

  3. Once you click Save Menu, go to Appearance → Menus in the Wordpress admin sidebar. And you will see the menu locations. Select "Main Navigation" from the list and Save:

    Menu location checkboxes
    Figure 3 Ruby Mega Menu auto-detects your theme's menu locations.

  4. Visit your site's front end. Your theme's default menu will be replaced with Ruby Mega Menu in the selected locations.

Tip You can enable Ruby Mega Menu in multiple locations at once — the same menu will render in each selected location, styled consistently via the settings panel.

Full Site Editing themes — shortcode

FSE themes (like Twenty Twenty-Four, Twenty Twenty-Five) don't use traditional menu locations. For these themes, use the [rubymm_rubymenu] shortcode.

  1. In your WordPress admin, go to Appearance → Editor to open the Site Editor.

  2. Navigate to the Header template part (or wherever you want the menu to appear).

  3. Click: Edit "Header".

    4. Menu location creation
    Figure 2 Creating menu location.

  4. DELETE EVERYTHING inside the header to prepare Header Pattern for the [rubymm_rubymenu] shortcode:

    Deleting all content of Header Part
    Figure 3 Delete EVERYTHING inside the header part until you see this image.
    • 1. Delete EVERYTHING inside the block first.
    • 2. Click (plus) icon to Add a block.
    • 3. Search "html".
    • 4. Click "Custom HTML":

  5. Inside the Custom HTML block, paste:

    [rubymm_rubymenu]
    Adding [rubymm_rubymenu] shortcode
    Figure 4 Adding [rubymm_rubymenu] shortcode as a Custom HTML block.

  6. Click Save in the Site Editor. The menu now appears wherever you placed the shortcode.

Important If you use the Shortcode block instead of Custom HTML, the menu will render with broken styling — WordPress injects <p> and <br> tags into shortcode output by default. The Custom HTML block bypasses this filter.

Menu dimensions

Regardless of which integration method you use, menu dimensions are controlled from the settings panel:

SettingDescriptionDefault
Menu WidthTotal width of the menu bar in pixels980px
Menu HeightHeight of the top-level menu bar (40–120px)50px
Full WidthMakes the menu span the entire screen widthOff
Transparent BackgroundRemoves the menu's background for overlay useOff

See the Settings Reference for the complete list.