css file

.menuButton {
    display: none;
}

@media screen and (max-width: 1024px) {
    
    .mainMenu {
        position: relative;
    }
    .mainMenu > div {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 40;
        overflow: visible !important;
    }
    .menuButton {
        text-align: right;
        font-size: 21px; 
        border-top: #ccc;
        display: block;
        float: right;
        font-weight: 400;
        color: #252525;
        background: transparent;
        line-height: 1;
        padding: 15px 13px;
        margin-top: 10px;
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 5px;
    }
    .menuButton:hover,
    .menuButton:focus{
        color: #252525;
        text-decoration: none;
    }
    .menuButton.active {
        background: #ccc;
        border-radius: 10px 10px 0 0;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.28);
        box-shadow: 0 0px 5px rgba(0,0,0,.28);
    }
    .menuButton .icon {
        background: url(http://cdn2.hubspot.net/hub/57042/file-231049877-png/images/Layout/menu-icon.png) no-repeat 0 0;
        width: 25px;
        height: 21px;
        display: inline-block;
        vertical-align: baseline;
        margin-right: 5px;
    }
    
    .mainMenu .hs-menu-wrapper > ul {
        float: none;
        background: #ccc;
        width: 300px;
        border-radius: 10px 0 10px 10px;
        margin-top: 0;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.28);
        box-shadow: 0 2px 5px rgba(0,0,0,.28);
    }
    .mainMenu .hs-menu-wrapper ul li {
        width: 100% !important;
    }
    .mainMenu .hs-menu-wrapper ul li a {
        padding: 10px !important;
        line-height: 40px;
        width: 100% !important;
    }
    .mainMenu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
        display: block !important;
        opacity: 1 ;
        position: relative ;
        width: 93% ;
        margin: auto ;
        visibility: visible;
    }
    
}

@media screen and (max-width: 767px) {
    .mainMenu > div {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
        z-index: 40;
        overflow: visible !important;
    }
    .menuButton {
        text-align: center;
        float: none;
        font-weight: 400;
        background: #ddd;
    }
    .mainMenu .hs-menu-wrapper > ul {
        width: 100%;
        border-radius: 0 0 10px 10px;
    }
    
}

@media screen and (max-width: 468px) {}

JS File

/* Functions 
**************************************************************/
  var windowWidth = $(window).width();

  // Mobile Menu Function
  function mobileMenu(menu){
      var mainMenu = $(menu),
          menuButton = mainMenu.before('<a href="#" class="menuButton"><i class="icon"></i>Menu</a>');
  
      $('.menuButton').on('click', function(e){
          e.preventDefault();
          mainMenu.slideToggle('fast', function(){
              $('.menuButton').toggleClass('active');
          });
          
      });
  }
    
    
/* Call Mobile Menu
**********************************************************/

  if($('.mainMenu > div').length > 0 && windowWidth <= 1024){
      mobileMenu('.mainMenu > div');
  }