After redesigning my KiaApp homepage, I noticed that my header no longer displayed all the submenu links. I checked Appearance → Menus, but everything looked correct. The pages were there, and their parent–child relationships were properly arranged.

The problem was in how I had built the new header.

My redesigned homepage used an Elementor HTML widget with manually written navigation links. That header did not automatically load my WordPress menu. Changing the menu in WordPress therefore had no effect on those manually written links.

The solution was to connect the redesigned header to my existing Main Menu using a PHP snippet.

What Is a Snippet?

A snippet is a small piece of code that adds or changes a specific part of a website’s behavior.

I used the Code Snippets plugin to save and activate the PHP code without editing my theme’s files. In this case, the snippet acted as a bridge between WordPress’s saved menu and my custom Elementor header.

The fix required two separate pieces:

• PHP in Code Snippets: retrieves the WordPress menu and builds its navigation structure.
• HTML, CSS, and JavaScript in Elementor: provide the homepage design and menu interactions.

Understanding where each piece belongs was an important part of the process. The homepage code beginning with <script> belongs in Elementor’s HTML widget, rather than in a PHP snippet editor.

How the PHP Snippet Works

1. It intercepts Elementor’s widget output

The snippet uses this filter:

add_filter('elementor/widget/render_content', ...)

This lets it modify a widget’s HTML when Elementor renders it, before that output reaches the visitor’s browser.

2. It identifies the KiaApp HTML widget

The code checks that the widget is an HTML widget and that its content includes:

class="kia-site"

If those checks fail, it returns the content unchanged.

Although I selected Run everywhere in Code Snippets, the code only modifies matching HTML widgets. If I reused the same marker on another page, that widget could also be affected.

3. It retrieves Main Menu from WordPress

The snippet finds my saved menu with:

wp_get_nav_menu_object('Main Menu')

It then retrieves its items using:

wp_get_nav_menu_items($menu->term_id)

These items provide the labels, links, order, and parent relationships needed to rebuild the navigation.

If the menu cannot be found or contains no items, the snippet leaves the original homepage HTML unchanged.

4. It preserves the submenu hierarchy

WordPress stores a parent identifier for each menu item. The snippet groups items by that identifier and follows the relationships through the nested levels.

For example:

Services
  AI
    Core AI
      Build Your First AI Agent

The original custom header contained only a small selection of links. Reading the saved WordPress hierarchy allowed the snippet to include the deeper submenu items too.

5. It builds desktop and mobile navigation

The snippet creates two versions from the same menu data.

On desktop, it builds dropdown panels. In my implementation, the item labeled Services receives a wider panel with columns for its immediate children.

On tablets and phones, it creates expandable sections using HTML’s <details> and <summary> elements. Visitors can open a category and continue into its nested sections.

This is custom rendering of the WordPress menu hierarchy. It does not automatically reproduce every theme-specific mega-menu setting.

6. It replaces the existing navigation sections

The snippet replaces these two sections in the rendered homepage:

.kia-desktop-nav
.kia-mobile-panel

The logo on the left, the “Let’s Talk” button, hero image, and other homepage sections remain in place.

The homepage’s CSS controls the menu’s appearance, while its JavaScript handles desktop hover and click behavior, keyboard controls, and mobile interactions.

Why the Original Links Still Appear in the Elementor Editor

The snippet does not permanently rewrite the HTML saved inside my Elementor widget. It modifies the output when Elementor renders that widget.

This means the saved code can still contain the original short list of links, while the published page displays the full menu retrieved from WordPress.

Those original links also provide a fallback if the snippet is disabled or cannot find Main Menu.

How I Installed the Fix

I added the PHP code in Snippets → Add New, selected PHP, chose Run everywhere, and saved and activated it.

Then I opened the redesigned homepage in Elementor, backed up the existing HTML, and replaced the HTML widget’s contents with the matching homepage code. After publishing, I checked the navigation on the published page.

The full submenu structure appeared while preserving the redesigned header.

Where I Manage the Menu Now

Each part has a specific responsibility:

Part	Responsibility
Appearance → Menus → Main Menu	Menu labels, destinations, order, and nesting
PHP snippet	Retrieves the menu and builds the navigation HTML
Elementor homepage code	Homepage design and menu interactions

I now manage navigation through Appearance → Menus → Main Menu, instead of editing both desktop and mobile link lists manually.

The snippet must remain active, and the menu must retain the name Main Menu, unless I update that name in the PHP code. My implementation also identifies the Services panel by its label, so renaming that item would require adjusting the corresponding condition.

If a menu change does not appear immediately, I clear the relevant website cache and check the published page again.

This experience helped me understand the difference between a header that merely looks like a WordPress menu and one that actually uses WordPress’s saved menu data.

The functions used to retrieve the menu are documented in the official WordPress references for wp_get_nav_menu_object() and wp_get_nav_menu_items().