Publish on WordPress
A Mega Menu (Mobile) is a section menu — it renders at the spot in the page where you embed it. On WordPress, the Navi+ AI Menu Builder plugin places it via shortcode or Gutenberg block; you never edit theme files.
Other platforms (Wix, Squarespace, Webflow, custom sites): see Publish on Wix / Squarespace / Others.
Steps
- Install the plugin — see Install the Navi+ AI Menu Builder plugin.
- Build your Mega Menu (Mobile) in Appearance → Naviplus Menu Builder. See Mega Menu (Mobile) — How to use.
- Copy the Embed ID (e.g.
SF-123456789). - Embed it using one of the methods below.
Insert the menu
Option 1 — Shortcode (recommended)
[naviwp embed_id="SF-123456789"]
Paste this into any post, page, or shortcode-aware widget.
If you want the mobile mega menu to live in your site header, the cleanest spot is the mobile header area in your theme — or a Full Site Editing template part scoped to mobile.
Option 2 — Gutenberg block
In the block editor, + → Naviplus Menu Builder, paste the Embed ID into the block sidebar. A plain Shortcode block with [naviwp embed_id="SF-..."] works the same way.
Option 3 — Page builders
Use a Shortcode widget with [naviwp embed_id="SF-..."], or an HTML widget:
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
Option 4 — CSS Selector (auto-placement from Navi+ app)
Instead of placing a shortcode manually, you can let Navi+ automatically insert or replace an element using a CSS Selector — configured entirely from the Navi+ app.
Understanding CSS Selector
A CSS Selector targets a specific HTML element on your page. Navi+ uses it to know exactly where to place your menu — insert before, insert after, or replace an existing element.
To find the right CSS Selector, use:
- Debug Mode — hover over any element and instantly copy its selector
- Browser DevTools — manual method via browser inspector
Three publishing options
In the Navi+ app: click Publish to website → turn on “Publish menu by Insert/Replace method” → enter your CSS Selector and choose one option:
Option A: Insert Before
Inserts the menu immediately before the selected element.
Example: main → menu appears above the main content area.
Common selectors for WordPress themes:
main— most themes#main— Twenty Twenty, Astra, OceanWP.site-main— many themes
Option B: Insert After
Inserts the menu immediately after the selected element.
Example: header → menu appears just below the header.
This is the most common setup for a mobile Mega Menu.
Common selectors for WordPress themes:
header— most themes.site-header— OceanWP, Astra#masthead— Twenty Twenty-One and default WordPress themes.mobile-header— themes with a dedicated mobile header
Option C: Replace
Replaces the selected element entirely with the Navi+ menu.
On mobile, most WordPress themes bundle the mobile menu inside the header or a hamburger toggle — there may not be a standalone element to replace. Insert Before or Insert After is recommended instead.
If your theme has a dedicated mobile menu element, use Debug Mode or Browser DevTools to find its selector.
Device-specific targeting
Add a suffix to apply the selector only on a specific device:
| Suffix | Applies to |
|---|---|
(M) |
Mobile only |
(D) |
Desktop only |
| (none) | Both |
For mobile menus, using the (M) suffix ensures the menu only appears on mobile and does not affect desktop layout. Example: header(M).
Mobile-first tips
- Make tap targets at least 44 × 44 px — use the editor’s spacing and padding controls; preview on a real device.
- Avoid more than 2 nesting levels — deep submenus are frustrating on touchscreens. For deeper trees consider a Slide Menu instead.
- Pair this with a Mega Menu (Desktop) and use Display rules → Device to render each menu only on its target breakpoint.
- Watch for overlap with sticky elements (Tab Bar, FAB, chat widgets). See Menu overlapping other elements.
Updating the menu later
Edits in the editor apply on the next front-end page load — no WordPress cache flush required.