Dropdown parent working link - add button to handle dropdown instead (Bootstrap 5)

[SebGbs]

Hello!

I'm currently in need of a button or something similar to handle dropdowns when links in the menu have children. I need the parent to be a working link itself and I can't use hover since it is used in the burgermenu used by both phones and tablets.
Is there a snippet I need to add to a new wp_walker or is it a larger solution?

Thanks in advance :)

[crftwrk]

Hello,

if I understand this correctly, you want to open dropdowns in navbar on hover but not on mobile? If so, check here https://github.com/orgs/bootscore/discussions/224.

If this way doesn't fit your needs, you can register and edit nav-walker in your child AlexWebLab/bootstrap-5-wordpress-navbar-walker#26.

Solved?

[SebGbs]

Hello,

Thanks for your answer :)

I've got a burgermenu visible on all devices. My problem at the moment is that I need the parent to be clickable, which means the dropdown doesn't get triggered unless setting up hover as you linked, but that would become a problem on touch-devices. Because of this I think the best solution would be button next to the parent, which opens and closes the dropdown containing all the children.

Is this possible?

[crftwrk]

Of course, possible is everything, question is how deep you want to go. Bootstrap or the nav-walker do not support this, so you have to think a bit out-of-the-box to achieve this.

Mobile	Desktop

JS

// Add link to dropdown in navbar 
$('#bootscore-navbar .nav-link.dropdown-toggle').click(function () {
  location.href = this.href;
});

// Add a .menu-toggler dropdown toggler button 
$('#bootscore-navbar .dropdown.nav-item').each(function () {
  $(this).append('<button class="menu-toggler btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Toggler</button>');
});

SCSS

.menu-toggler {
  position: absolute;
  top: 0;
  right: 0;

  @include media-breakpoint-up(lg) {
    // Hide toggler on lg screen
    display: none;
  }
}

@include media-breakpoint-up(lg) {
  // Make dropdowns visible on hover
  #bootscore-navbar {
    .nav-item {
      .dropdown-menu {
        margin-top: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: .7s;
      }

      &:hover .dropdown-menu {
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

Solved?

Edit:

I've got a burgermenu visible on all devices.

Adjust media queries in SCSS to your needs.

[SebGbs]

Thanks for your solution - I just wanted to make sure there wasn't something built-in before I went down the custom-route.
Thanks for the clarification!

[crftwrk]

You‘re welcome 👍 Please mark the answer.