html css mobile menu issue

[ianhaney]

I need some help with a mobile nav menu, it works to a point, the issue when the nav menu is expanded and I scroll down the site to view the categories in the menu as there are quite a lot, the nav menu collapses. I am unsure how to fix it, the coding I have is below

<script>
/* MOBILE COLLAPSE MENU */
(function($) {
  $.fn.collapsable = function(options) {
    // iterate and reformat each matched element
    return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree = obj.next('.navigation');
      obj.click(function(){
        if( obj.is(':visible') ){tree.toggle();}
      });
      $(window).resize(function(){
        if ( $(window).width() <= 570 ){tree.attr('style','');};
      });
    });
  };
})(jQuery);
</script>

<script>
jQuery(document).ready(function($) {
    $('.slide-trigger').collapsable();
});
</script>

<?php if ($categories) { ?>
<nav class="group">
  <h2 class="navheader slide-trigger">Menu <span></span></h2>
  <ul class="navigation group">
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div>
    
  </ul>
</nav>
<?php } ?>

nav.group {
margin: -19px 0px 0px -15px;
width: 330px;
clear: both;
}

.navigation {
  max-width: none;
  background: #000;
  padding: 0;
}

.navigation li {
  float: left;
}

.navigation li a {
  display: block;
  color: #fff;
  padding: 10px;
}

.navigation li a:hover {
  background: #0fcaf2;
}

.navheader { 
  font-size: 12px;
}

.slide-trigger {
  display: none; /* need this */
  /*border: 1px solid #CCCCCC;*/
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  background: rgba(179,220,237,1);
background: -moz-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(179,220,237,1)), color-stop(50%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
background: -webkit-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -o-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: linear-gradient(135deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1 );
  cursor: pointer;
  margin-left: 15px;
  margin-right: 15px;
}

.slide-trigger span {
  background-image: url("../image/dropdown-arrows.png");
  background-position: 0 -14px;
  display: block;
  float: right;
  margin-top: 3px;
  height: 14px;
  width: 32px;
}

.slide-trigger {
display: block;
padding: 10px;
}

.no-js .slide-trigger {
display: none;
}

.navigation {
display: none;
}

.no-js .navigation {
display: block;
}

.navigation {
margin: -9px 15px;
z-index: 9999;
position: absolute;
}

.navigation li {
float: none;
list-style-type: none;
width: 300px;
}

.navigation li a {
border-bottom: 1px solid #fff;
}

Thank you in advance, the site is www.ccgretail.co.uk