Skip to content

Instantly share code, notes, and snippets.

@imuhammadshoaib
Last active March 1, 2023 07:14
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save imuhammadshoaib/19ec63889bcf0bd0ac038cf86e850a50 to your computer and use it in GitHub Desktop.
Save imuhammadshoaib/19ec63889bcf0bd0ac038cf86e850a50 to your computer and use it in GitHub Desktop.
Make parent link clickable in Bootstrap with Wordpress NavWalker
//FROM
$atts['href'] = '#';
$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;
//TO
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
$atts['class'] = 'dropdown-toggle nav-link';
$atts['id'] = 'menu-item-dropdown-' . $item->ID;
/*
*Add this CSS in your (style.css) file.
*/
.dropdown:hover>.dropdown-menu {
display: block;
}
@encoderit-arman
Copy link

Thanks Man Helped me lot :)

@kokoruz
Copy link

kokoruz commented Feb 15, 2021

I was curious if you can share how you addressed when this is in mobile view. I image you can style a "+" to open the child elements of that parent that is now clickable but I would think that means altering the NavWalker more to now address gaining access to make the child elements clickable inside the hamburger menu.

@lewsea
Copy link

lewsea commented Sep 2, 2021

this save me bro thanks a lot

@devinegger
Copy link

This s still a working answer!!! Thanks for saving the day!

@bodaiz
Copy link

bodaiz commented Mar 18, 2022

Is it possible to set this on desktop version only and maintain the mobile version as standard?

@codex73
Copy link

codex73 commented Apr 7, 2022

Is it possible to set this on desktop version only and maintain the mobile version as standard?

This is a very good question @bodaiz . I will think conditions could be added to "class-wp-bootstrap-navwalker.php" to allow for this. My concern is that this will revert the parent to not having a working href as assigned. The issue with the above solution(patch) is that it render the touch toggle mobile unusable. @kokoruz To your point, in my end the "+" does toggle the dropdown on mobile, but I don't remember is this functionality is out of the box or I added it. Thoughts?

@codex73
Copy link

codex73 commented Apr 7, 2022

What helped the mobile implementation on my end was adding "border: 1px solid #eee;" to the toggle class (the "+"). This helps the user notice there are two-click points, one to toggle and the parent link.

@internick2017
Copy link

Thank still works

@asankasandz
Copy link

thanks that works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment