Link with dropdown associated to a page contains no URL but a #.

[Ezkielnet]

Link with dropdown associated to a page contains no URL but a #.

I have created a menu with the following structure:

Home - Link to home (Custom link)
Country -Dropdown (Page) <-- Link with #
--States (Sub-pages)

The problem is that when the dropdown is a page, the menu does not add it as a link but with a # and it is not clickable. I have seen that other menus do incorporate the ability to drop down and click. Example, Twenty Twenty menu.

Code using wp-bootstrap-navwalker

<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-89 nav-item"><a title="Chile" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-89">Chile</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-89" role="menu">
	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-chile menu-item-94 nav-item"><a title="Migrar" href="http://localhost/wordpress/chile/claves-para-emigrar-a-chile-consejos-utiles-y-recomendaciones/" class="dropdown-item">Migrar</a></li>
	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-chile menu-item-93 nav-item"><a title="Vivir" href="http://localhost/wordpress/chile/como-vivir-en-chile-consejos-y-recomendaciones-para-una-vida-plena/" class="dropdown-item">Vivir</a></li>
	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-chile menu-item-92 nav-item"><a title="Trabajar" href="http://localhost/wordpress/chile/como-trabajar-en-chile-siendo-extranjero-consejos-y-requisitos/" class="dropdown-item">Trabajar</a></li>
	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-chile menu-item-91 nav-item"><a title="Emprender" href="http://localhost/wordpress/chile/como-emprender-en-chile-siendo-extranjero-consejos-y-requisitos/" class="dropdown-item">Emprender</a></li>
</ul>
</li>

Code using Twenty Twenty

<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-89"><a href="http://localhost/wordpress/chile/">Chile</a><span class="icon"></span>
<ul class="sub-menu">
	<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-chile menu-item-94"><a href="http://localhost/wordpress/chile/claves-para-emigrar-a-chile-consejos-utiles-y-recomendaciones/">Migrar</a></li>
	<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-chile menu-item-93"><a href="http://localhost/wordpress/chile/como-vivir-en-chile-consejos-y-recomendaciones-para-una-vida-plena/">Vivir</a></li>
	<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-chile menu-item-92"><a href="http://localhost/wordpress/chile/como-trabajar-en-chile-siendo-extranjero-consejos-y-requisitos/">Trabajar</a></li>
	<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-chile menu-item-91"><a href="http://localhost/wordpress/chile/como-emprender-en-chile-siendo-extranjero-consejos-y-requisitos/">Emprender</a></li>
</ul>
</li>

I hope I have made myself clear.

[IanDelMar]

This is how Bootstrap handles nested nav menus. See Bootstrap's docs for the navbar. However, you can use split button dropdowns to have a clickable link and a dropdown toggle. See understrap/understrap#1646 (reply in thread) for an example.

[codewizard13]

I have the same issue - has anyone found a fix yet?