http://www.krrphotography.com
http://www.twinbeachplayers.com
http://www.letsfightback.com

Thanks for writing in!

To achieve that, you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px){
body .sub-menu.collapse {
      display:block;
}
}

Hope that helps.

In that case, you can try one of these two workarounds:

1: Open only the first dropdown by default when the menu button is clicked (see: http://prntscr.com/6u4p7p). To achieve it, add following JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $('.mobile > ul > .menu-item-has-children .x-sub-toggle').first().click();
});

2: Open the submenu items when clicking the whole parent link and not just the arrows. To achieve it, add following JS code under Custom > JavaScript in the Customizer:

// Expand Submenus on Parent Menu Click (for mobiles)
jQuery(document).ready(function($) {
   var subMenuLink = $('.x-navbar .mobile .x-nav li.menu-item-has-children > a');
 
   subMenuLink.on('click touchstart', function(e) {
     e.preventDefault();
     var $this = $(this);
     $this.find('.x-sub-toggle').off('click touchstart');
     $this.closest('li.menu-item-has-children').toggleClass('x-active');
     $this.siblings('.sub-menu').slideToggle(300);
   });
});

Hope this helps. 🙂

Thank you.

Let us know if you need anything else.

Thanks. Have a great day! 🙂

Cheers!