1. Welcome to FluxMenu

Thank you for purchasing FluxMenu. FluxMenu is a premium, high-performance WordPress Mega Menu plugin designed to replace basic navigation with highly responsive, CSS Grid-based multi-column dropdowns, WooCommerce shopping widgets, secure interactive login/register modals, and speed-optimized AJAX live search results.

Need Help?

If you encounter issues during configuration, read through the sections below. You can also contact our support staff at Support or search the FAQ.

2. Overview

FluxMenu overrides the default layout generation of standard WordPress navigation menu walks. Instead of deep nested bulleted items, it compiles a CSS Grid structure controlled dynamically by a robust Customizer system and menu post meta fields.

The core features include:

Dynamic visual mega menus, tab containers, and columns.
Premium featured banners with aspect-locked promo layouts.
Built-in AJAX WooCommerce mini-cart widget fragments support.
Secured front-end guest authentication form popups.
Custom font rendering served locally for GDPR compliance.

3. Requirements

To run FluxMenu seamlessly, ensure your web hosting environment meets the following configurations:

Dependency	Minimum Requirement	Recommended
WordPress Version	WordPress 5.6+	WordPress 6.5+
PHP Version	PHP 7.4+	PHP 8.1+ / PHP 8.2+
WooCommerce (Optional)	WooCommerce 6.0+	WooCommerce 8.5+
PHP Extension	JSON Extension	Enabled

4. Installation

Installing FluxMenu follows the standard WordPress plugin installation routine:

Method A: Dashboard Upload

Download the product archive from your CodeCanyon Account.
Extract the downloaded archive and extract the fluxmenu.zip file.
Navigate to your WordPress Admin Dashboard and go to Plugins > Add New.
Click Upload Plugin at the top, select the fluxmenu.zip file, and click Install Now.

Method B: FTP Upload

Extract the fluxmenu.zip folder locally on your computer.
Connect to your server using an FTP client (FileZilla, Cyberduck, etc.).
Upload the unzipped fluxmenu directory directly to the /wp-content/plugins/ path.

5. Activation

Once uploaded, activate the plugin to make it functional:

Navigate to Plugins > Installed Plugins inside your WordPress Admin.
Locate FluxMenu in the listing.
Click the blue Activate link.

Activation Hook Routine

Upon activation, FluxMenu automatically creates and stores default settings in the options database table to populate initial layout colors, typography styles, and responsiveness breakpoint definitions.

6. Quick Start

Follow these quick configurations to render your first FluxMenu mega menu dropdown:

Navigate to Appearance > Menus. Select or create a menu.
In the menu hierarchy, select a top-level parent menu item (e.g. "Shop").
Hover over the item and click the blue ⚡ Flux badge that is injected adjacent to the menu item label. This launches the FluxMenu settings.
Go to the Submenu tab and change the Submenu Type to Mega Menu. Save Menu.
Go to FluxMenu > Settings, select the target menu you configured, and click Save Settings.

Screenshot 1: The main settings dashboard page of FluxMenu.

7. Integration Modes

FluxMenu provides three flexible integration methods to ensure compatibility across themes:

Integration Mode	Description	Usage Case
Target Menu Hook	Automatically filters the output of the selected menu across standard theme slots.	Standard headers relying on registered locations.
Master Header Replacement	Injects the menu at the top of the body container, overriding standard header wrappers.	Resolving layout issues in restrictive themes.
Menu Only Mode	Suppresses logo, search, and social enqueues, returning only the styled links.	Placing inside grid columns of builder headers.

8. Menu Builder

Use the standard WordPress menu structure to arrange columns. Items nested at depth 1 represent column headers inside the mega menu container, and items nested at depth 2 represent submenu list links under their respective column headers.

Screenshot 2: Arranging columns and child elements within the mega menu.

9. Mega Menu Setup

To configure a Mega Menu:

Open the ⚡ Flux overlay for the parent menu link (depth 0).
Navigate to the Submenu tab.
Set Submenu Type to "Mega Menu".
Set Submenu Width to either "Full Width" or "Container Width".
Adjust Submenu Columns (default is 4).

10. Featured Cards

Make child menu items stand out by rendering them as featured visual cards:

Open the ⚡ Flux overlay for a child item (depth 1 or 2).
Go to the General tab and locate the ★ Featured Item section.
Toggle "Mark as Featured Item" to **ON**.
Choose a layout: Card (Image on top, text details below), Banner (Text layered over full-width background image), or Promo Card.
Upload an image and write custom descriptions. Save Menu.

11. Sticky Header

FluxMenu features a premium sticky header routine. Once scrolled past the viewport threshold, the menu bar shrinks and locks at the top of the browser screen. To configure sticky styles, navigate to Customize > FluxMenu Options > Advanced Sticky. You can customize the sticky background color, link hover colors, logo width shrink ratio, and animation speed.

Screenshot 3: Customizing sticky settings inside the WordPress Customizer.

12. Modal System

Trigger beautiful popup overlays directly from a menu link click:

Open the ⚡ Flux overlay on the menu link.
Go to the Advanced tab.
Set Click Action to **Open Modal**.
Choose Modal Type as **Custom Content** and input custom HTML or Shortcodes in the text area block.

Screenshot 4: Setting up a custom modal popup from a menu item.

13. Login & Register Modal

FluxMenu includes a secure, front-end authentication modal popup out-of-the-box:

Open the ⚡ Flux settings for the menu link.
Under Advanced, set the click action to Login Modal or Register Modal.
FluxMenu will automatically intercept the link click, block default navigation, and present the user with a stylized AJAX-driven login or register form.

Registration Safeguard Checks

Registration modal submissions check the core WordPress users_can_register option. If guest registration is disabled in General Settings, registration requests will be blocked and return an error message to protect site security.

14. WooCommerce Integration

When WooCommerce is active, FluxMenu automatically enables shopping cart features. In the settings dashboard, check **Show Cart in Navbar**. FluxMenu will inject a mini-cart bag icon that outputs a dropdown list of products in the cart, totals, and buttons to **View Cart** or **Checkout**.

Screenshot 6: WooCommerce shopping cart dropdown widget preview.

15. AJAX Search

Provide users with instant search results without reloading the page:

Go to FluxMenu > Settings and toggle Show AJAX Search in Navbar to **ON**.
If WooCommerce is active, the search form automatically restricts query targets to products, outputting pricing details and product images inside the live results box.

Screenshot 5: Live AJAX search results preview.

16. Style Presets

FluxMenu comes with pre-designed skins (Light Minimalist, Sleek Dark, Emerald Green, Corporate Blue, Sunset Crimson) to completely transform your menu with one click. Go to FluxMenu > Settings, select a preset in the **Skins & Presets** tab, and save settings. The color definitions will instantly adjust.

Screenshot 7: Instant 1-click skins and style presets dashboard section.

17. Elementor Integration

To place FluxMenu inside an Elementor Header template:

Open your Elementor Theme Builder and edit the Header template.
Add a standard Shortcode widget.
Paste the shortcode [fluxmenu]. FluxMenu will render the target menu perfectly.

18. Divi Integration

In Divi's Theme Builder, edit your Global Header. Add a Code module and paste the shortcode: [fluxmenu]. Make sure the container row is set to full width and has overflowing enabled in Divi options so dropdown elements do not get cut off by structural CSS constraints.

19. Beaver Builder Integration

When designing headers with Beaver Builder, insert an HTML or Text module, and paste [fluxmenu] inside the block. Standard styled links, icons, search fields, and WooCommerce carts will render inline.

20. Shortcodes

FluxMenu provides the following shortcode utilities:

[fluxmenu]: Renders the primary navigation menu styled using the global settings options.
[flux_login_form]: Renders a standalone secure login form.
[flux_register_form]: Renders a standalone registration form checking the site registration settings.

21. Troubleshooting

The mega menu dropdown gets cut off or hidden

This is caused by an overflow: hidden; or overflow: clip; rule in your theme's header structure. To resolve, go to **Customize > Additional CSS** and add:

.site-header, .header-container { overflow: visible !important; }

AJAX search is not displaying WooCommerce prices

Ensure that WooCommerce is fully activated and the target query items are WooCommerce products. If the plugin falls back to post type search, prices are omitted.

22. Frequently Asked Questions

Does FluxMenu support multilingual sites?

Yes. FluxMenu is fully translation ready. Translation template files (POT) are located under `/languages/` for WPML, Polylang, or Loco Translate integrations.

How do I change the mobile toggle breakpoint?

Go to the Customizer (Customize > FluxMenu Options > Colours & Styles) and change the **Mobile Breakpoint** field (e.g. 768px or 991px).

23. Performance Tips

FluxMenu is engineered to load extremely quickly. Inter and Outfit fonts are bundled locally inside the plugin files, completely avoiding external Google Fonts API roundtrips. To keep speeds high:

Keep menu image attachments scaled to thumbnail sizes.
Enable page cache plugins (WP Rocket, LiteSpeed Cache) to cache compiled HTML blocks.

24. Security Notes

FluxMenu is fully audited against PHP Object Injection, Cross-Site Request Forgery (CSRF), and SQL injection attacks. Settings are exported in standard JSON formats. We strictly verify nonces across all AJAX forms and endpoints.

25. Changelog

Release history is maintained inside the standalone Changelog Guide.

26. Support

If you have any questions or bugs to report, please open a support ticket on our CodeCanyon support tab. Provide your Envato purchase code for validation.

27. Credits & Dependencies

WordPress Core - standard navigation walk libraries.
FontAwesome - locally bundled vector icon fonts.
Google Web Fonts - locally bundled Inter and Outfit fonts.