wp-bootstrap-navwalker icon indicating copy to clipboard operation
wp-bootstrap-navwalker copied to clipboard

Link in the parent menu and dropdowns - resolved

Open narrativa-agencia opened this issue 4 years ago • 7 comments

I installed and use Wp-bootstrap-navwalker, but when I set the depth to 2, to display the dropdown, the main menu will continue with its link, disable it by placing the # in place of the link. How can I enable it. I really need that possibility.

Steps to reproduce the issue:but when I set the depth to 2, to display the dropdown

What I expected:the main menu will continue with its link

What happened instead:disable it by placing the # in place of the link

narrativa-agencia avatar Aug 14 '20 16:08 narrativa-agencia

For functionality it doesn't matter whether there is the actual link or just a # because Bootstrap's default behaviour is to toggle the dropdown when clicking the first level menu entry. As long as data-toggle="dropdown" is present a click will toggle the dropdown. You can remove the dropdown functionality and restore the link (see changes below). However, what would you expect from a menu item which is a dropdown toggler and a link at the same time? If a click results in following the link you wouldn't be able to use the dropdown, right? You could try to separate the item title and the dropdown toggler and make the first a clickable link and the latter toggle the dropdown. But be aware that a small area to toggle the dropdown may give undesired results on small (touch) screens.

Change line 213-221 to make the first level menu item a clickable link:

			// If the item has_children add atts to <a>.
			if ( $this->has_children && 0 === $depth ) {
-				$atts['href']          = '#';
+				$atts['href']          = ! empty( $item->url ) ? $item->url : '#';
-				$atts['data-toggle']   = 'dropdown';
+				// $atts['data-toggle']   = 'dropdown';
				$atts['aria-haspopup'] = 'true';
				$atts['aria-expanded'] = 'false';
				$atts['class']         = 'dropdown-toggle nav-link';
				$atts['id']            = 'menu-item-dropdown-' . $item->ID;
			}

IanDelMar avatar Aug 14 '20 18:08 IanDelMar

I appreciate the attention and concern by informing me of some issues. I will run some tests here and answer this issue later, to stay for the next ones.

narrativa-agencia avatar Aug 14 '20 18:08 narrativa-agencia

Hello,

How to do something like this https://prnt.sc/u8c32f

Thanks

michcio19 avatar Aug 30 '20 08:08 michcio19

I would like to inform you that the tips given performed perfectly, but I had to add it to my css

ul.nav li.dropdown: hover ul.dropdown-menu {
     display: block! important;
}

~~Without quotes, of course!~~

I haven't tested the menu on the mobile yet, in which it said it might be a problem.

Thanks - I recommend the tip

NOTE: I did not close the Issue, to complete the information and help others, when I test on mobile.

narrativa-agencia avatar Sep 01 '20 20:09 narrativa-agencia

@narrativa-agencia What did you experience on a mobile?

IanDelMar avatar Jan 30 '21 21:01 IanDelMar

I haven't tested the menu on the mobile yet, in which it said it might be a problem.

It doesn't work for mobile. Basically, it opens the dropdown menu and starts to load the page the parent is linking to at the same time. So the submenu is not accessible on mobile by this - unless you are really fast at clicking ofc.. ;)

dnlbauer avatar Apr 14 '21 08:04 dnlbauer

i upgraded from Navwalker 2.04 and parent links are now replaced with #

Previously on mobile 1 click expanded the toggle second click opened the link.

And on desktop hover opened but u could still click the parent link

oempire avatar Jul 25 '21 13:07 oempire