search

wp-bootstrap / wp-bootstrap-navwalker

A custom WordPress nav walker class to fully implement the Twitter Bootstrap 4.0+ navigation style (v3-branch available for Bootstrap 3) in a custom theme using the WordPress built in menu manager.
https://wp-bootstrap.github.io/wp-bootstrap-navwalker/
GNU General Public License v3.0
3.37k stars 1.94k forks source link

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

Open Ezkielnet opened 1 year ago

Ezkielnet commented 1 year ago

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 commented 1 year ago

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 https://github.com/understrap/understrap/discussions/1646#discussioncomment-5641826 for an example.