Dropdown issue in responsive (hover vs touch)

so i noticed that when the navigation is in collapsed mode, the dropdowns don't function as well, because the hover JS in radix-script.js is still overiding the standard bootstrap tap to drop function.

i only have a quick hack to the js to solve it, and was wondering if anyone has noticed this and has a way to overcome having to set this manually, because the pixel number needs to change based on when the breakpoint is set for the collapse.

here is my code:

  if($(window).width() > 991) {
  // Show dropdown on hover.
  Drupal.behaviors.radix_dropdown = {
    attach: function(context, setting) {
      $('.dropdown').once('radix-dropdown', function(){
        // Show dropdown on hover.
        $(this).mouseenter(function(){
          $(this).addClass('open');
        });
        $(this).mouseleave(function(){
          $(this).removeClass('open');
        });
      });
    }  
  }
}

Original code

  // Show dropdown on hover.
  Drupal.behaviors.radix_dropdown = {
    attach: function(context, setting) {
      $('.dropdown').once('radix-dropdown', function(){
        // Show dropdown on hover.
        $(this).mouseenter(function(){
          $(this).addClass('open');
        });
        $(this).mouseleave(function(){
          $(this).removeClass('open');
        });
      });
    }
  }

Please let me know if anyone has any idea's to make this more functional to work with bootstraps collapse breakpoint set in the _variable.scss :)