Build Stunning, High-Converting Mega Menus.
Zero Bloat. Zero Limits.

2. Theme Locations & Theme Integration

ApexMenu Studio Pro binds to your theme's registered navigation menu locations automatically without requiring template file editing.

Astra Theme Integration

If you are using the Astra theme (or Astra Pro), ApexMenu Studio Pro integrates directly with Astra's Header & Footer Builder:

1. Go to Appearance → Menus.
2. Select your primary navigation menu from the dropdown list.
3. In the Menu Settings area at the bottom, ensure Primary Menu is checked under Display location.
4. In the right-hand ApexMenu Studio sidebar panel, enable Override Theme Nav Walker.

Elementor Header & Footer Builder

To use ApexMenu inside Elementor, simply use the native ApexMenu Navigation Widget or drop the following standard shortcode into any Elementor HTML or Shortcode block:

3. Visual Grid Columns & 1-Click Blueprints

Building multi-column mega panels in ApexMenu Studio Pro requires zero CSS knowledge thanks to our integrated 1-click grid resizer.

How to Create a 4-Column Mega Menu

1. Navigate to Appearance → Menus and expand the parent menu item (e.g. Shop or Solutions).
2. Check the checkbox labeled Enable Mega Menu for this item.
3. In the Grid Distribution Presets row, click [4 Col 25/25/25/25].
4. Drag 4 second-level menu items beneath the parent item. Each second-level item will automatically become the header for one of the 4 columns!
5. Nest third-level menu items beneath the column headers to populate the links.

Available Layout Presets

• [1 Col 100%] — Single wide container for announcements or featured banners.
• [2 Col 50/50] — Balanced two-column split, ideal for service portfolios.
• [3 Col 33/33/33] — Industry-standard 3-column SaaS product showcase.
• [4 Col 25/25/25/25] — High-density e-commerce category directory.
• [Split 30/70] — Sidebar directory on the left with prominent promo banner on the right.
• [Featured 25/50/25] — Center showcase column flanked by quick category links.

4. Setting Up Tabbed Mega Menus (Horizontal & Vertical)

Tabbed mega menus allow you to organize dozens of links into categorized tabs that switch content seamlessly when hovered or clicked.

Configuring Vertical Tabs

1. Under your parent mega item, check Enable Tabbed Submenu.
2. Select Vertical Sidebar Tabs from the layout dropdown.
3. Each second-level menu item becomes a clickable or hoverable tab button.
4. Add third-level items under each second-level item — they will render inside the active tab panel!

5. Badges, Icons & Live WooCommerce Integration

Enhance user conversion by adding visual pills, callout badges, and live e-commerce data directly into your navigation hierarchy.

Adding Custom Badges (e.g., HOT, NEW, 50% OFF)

1. Expand any menu item in Appearance → Menus.
2. Enter your label into the Badge Text input field (e.g. HOT or SALE).
3. Select your badge color or paste a hex color code (e.g. #ef4444 for red, #10b981 for emerald).
4. The badge will automatically render beside the link text with rounded pill borders and high-contrast typography.

WooCommerce Category & Product Sync

ApexMenu Pro connects directly to your WooCommerce product database. Select Dynamic WooCommerce Grid on any column to automatically query recent products, on-sale products, or top-rated items from specific categories.

6. Scoped CSS & Design Presets

ApexMenu Studio Pro is engineered with 100% scoped CSS custom properties to prevent style leakage into themes.

Built-in Design Presets

• Modern Light: High-contrast crisp white background, subtle drop shadows, slate typography.
• Cyber Dark: Deep obsidian background with electric blue/violet neon accents.
• Glassmorphism: Semi-transparent backdrop blur with frosted glass borders.
• Royal Indigo: Premium corporate palette featuring rich indigo accents and subtle borders.

Custom CSS Overrides via CSS Variables

You can override colors and radii globally in your child theme stylesheet or Astra Customizer:

7. Mobile Responsive Drawer Engine

ApexMenu Studio Pro features a hardware-accelerated off-canvas drawer optimized for touch gestures on iOS and Android.

Mobile Drawer Features

• 60fps Transform Animations: Uses GPU-accelerated CSS translate3d instead of jQuery animations.
• Nested Accordions: Multi-level mega menus collapse into clean touch-friendly accordions on mobile viewports (≤ 920px).
• Body Scroll Lock: Automatically locks background document scrolling when the mobile drawer is open to prevent awkward bounce.
• Custom Header Bar: Optional mobile top bar with custom logo, search icon, and hamburger button.

8. Permanent max_input_vars Resolution

The #1 issue with traditional mega menu plugins like UberMenu is the infamous WordPress max_input_vars save crash.

The Architectural Cause

WordPress core sends roughly 13 to 21 individual HTTP POST variables per menu item when clicking Save Menu. Once a menu exceeds roughly 70 items, total form variables exceed PHP's default max_input_vars = 1000, causing PHP to silently drop trailing items.

How ApexMenu Solves It Forever

ApexMenu Studio Pro bypasses native HTML form serialization entirely. All mega column distributions, custom badges, icons, and layout rules are serialized into a single atomic JSON schema stored in custom post meta. Even if your menu contains 500 items, ApexMenu uses exactly 1 POST variable, completely eliminating save failures on all hosting providers.