My team has a WordPress site with a custom FoundationPress theme. One of the primary nav items is "About us", this item has secondary items nested beneath it in a submenu. This is configured in the standard WordPress way - a parent menu item with children menu items in the menu builder. For some reason, the space between the two words in the parent item causes the dropdown icon/button to disappear from just this item on the front end. We replaced the plain space character with a non-breaking space (' ') and the dropdown icon shows up again and the submenu can be toggled (simply removing the space character altogether works as well).

Interestingly, the dropdown icon and submenu items aren't being removed from the DOM with this bug, identical markup can be seen in the inspector whether the plain space is used or not. The icon element remains in the markup but disappears from the webpage.

This is the php we use to insert the menu into the template(s). You'll notice the dropdown icons are also inserted via this snippet:

<?php wp_nav_menu(array('container_class' => 'main-nav', 'theme_location' => 'home-nav', 'after' => '<span class="dropdown-arrow"><i class="rotate fas fa-angle-down"></i></span>')); ?>

For the record, we're pretty okay with using the non-breaking space instead of the plain space in the menu item name as a workaround, we're just very curious as to why this is happening.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.