wp-bootstrap-navwalker
wp-bootstrap-navwalker copied to clipboard
Link in the parent menu and dropdowns - resolved
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
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;
}
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.
Hello,
How to do something like this https://prnt.sc/u8c32f
Thanks
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 What did you experience on a mobile?
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.. ;)
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