Wordpress menu item is replaced with submenu item

General Questions
1

Hi, I’m trying to find a way to build a dropdown menu in Wordpress. Whenever I indent the links within Wordpress, the indented submenu items replace the menu item completely. I don’t want to use Bootstrap or Tailwind or a plugin but open to custom php code if necessary.

I looked through previous forum questions, which led me to the new option to select a dropdown menu as a Wordpress action but the documentation doesn’t explain how this works.

Isn’t the natural behaviour when building a Wordpress theme from scratch for the submenu item to sit alongside the menu item, not replace it? I’m literally pulling my hair out trying to make this work. Any help would be greatly appreciated.

Screenshot 2023-02-02 at 20.08.02
Screenshot 2023-02-02 at 20.08.022714×304 35.8 KB

Screenshot 2023-02-02 at 20.07.41
Screenshot 2023-02-02 at 20.07.411058×606 26.7 KB

2

Menus are really the weakest point of non-FSE WP IMO. Someone can correct me if I’m wrong, but the Smart Menu WordPress Action in PG should be automatically creating one level-deep dropdowns for you (your code has to be setup with nested unordered lists), but no more than one level deep.

If you want to custom code a solution, you’ll have to work with a custom menu walker. Here’s a great tutorial on custom menu walkers but these things are not very intuitive; it took me a long time to figure out just the basics.

These days I just create my own navigation block for the header (or wherever) b/c the new WP Navigation block is not versatile, so even in the block world, WP navigation is still a headache.

1 Like
3

Also, paste the code you’re using for your navigation… I suspect it’s not setup for the Smart Menu Action to work properly.

4

Thank you for taking the time to get back to me @jonroc I really appreciate it. Here’s the code I threw together:

<nav>
    <div class="nav-items">
        <ul class="nav-items" cms-menu-register-description="The mobile menu" cms-menu="primary" cms-menu-dropdown=".absolute">
            <li class="nav-item relative"><a href="" class="nav-item__link"><ul class="absolute"></ul>Home</a>
            </li>
            <li class="nav-item"><a href="" class="nav-item__link">Services</a>
            </li>
            <li class="nav-item"><a href="" class="nav-item__link">Contact</a>
            </li>
        </ul>
        <ul class="nav-items" cms-menu="header_cta" cms-menu-register-description="header_cta" cms-menu-register>
            <li>
                <a href="" class="nav-cta" aria-controls="discovery-form" ata-pgc-define="cta-btn-rounded" data-pgc-define-name="cta btn rounded" data-pgc-define-photo-preview-only><span class="sr-only" aria-expanded="false">Start your Project</span></a>
            </li>
        </ul>
    </div>
</nav>

Also If you’re creating a navigation block, how do you tackle editing the dropdown/ hidden menu parts from the block editor?