Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Ezkielnet opened this issue Apr 19, 2023 · 1 comment
Open

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

Ezkielnet opened this issue Apr 19, 2023 · 1 comment

Comments

@Ezkielnet
Copy link

Ezkielnet commented Apr 19, 2023

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
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants