English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
See demo Get started

Publish on WordPress

A Grid Menu is a section menu — it renders at the spot in the page where you embed it. It’s a great fit for category shortcuts, hub pages, and “what would you like to do?” panels. 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

  1. Install the plugin — see Install the Navi+ AI Menu Builder plugin.
  2. Build your Grid Menu in Appearance → Naviplus Menu Builder. See Grid Menu — How to use and Responsive Grid Menu.
  3. Copy the Embed ID (e.g. SF-123456789).
  4. Embed it using one of the methods below.

Insert the menu

Option 1 — Shortcode (recommended)

[naviwp embed_id="SF-123456789"]

Drop this into any post, page, or shortcode-aware widget.

Typical spots:

  • A homepage hero section with category tiles.
  • A landing page above the fold.
  • The empty state of a category archive.

Option 2 — Gutenberg block

In the block editor, + → Naviplus Menu Builder, then paste the Embed ID into the block sidebar. A plain Shortcode block with [naviwp embed_id="SF-..."] is equivalent.

Option 3 — Page builders (Elementor, Divi, Bricks, Oxygen)

Use a Shortcode widget with [naviwp embed_id="SF-..."]. If a builder has no Shortcode widget, an HTML widget with the embed div works:

<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:

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 Grid Menu immediately before the selected element, displayed as a full section.

Example: main → the Grid Menu appears above the main content area.

This is the most common setup for a Grid Menu on WordPress.

Common selectors for WordPress themes:

  • main — most themes
  • #main — Twenty Twenty, Astra, OceanWP
  • .site-main — many themes
  • #content — Divi, some default themes
Option B: Insert After

Inserts the Grid Menu immediately after the selected element.

Example: header → the Grid Menu appears just below the header.

Common selectors for WordPress themes:

  • header — most themes
  • .site-header — OceanWP, Astra
  • #masthead — Twenty Twenty-One and default WordPress themes
Option C: Replace

Most WordPress sites do not have a built-in Grid Menu element to replace. Insert Before main is the recommended approach.

If your theme does have a grid-style element you want to replace, 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

Example: main(D) — inserts the Grid Menu only on desktop.

Mobile tips

  • Use Responsive Grid Menu to switch column count per breakpoint — e.g. 4 columns on desktop, 2 on mobile.
  • Keep tile content short — an icon, a one- or two-word label, optionally a tiny description. Long labels wrap unpredictably.
  • Aim for tap targets at least 44 × 44 px including padding.

Updating the menu later

Edits in the editor apply on the next front-end page load — no WordPress cache flush required.