Dropdown not showing on small screens

Question

I'm creating a megamenu based on this one from codyhouse http://codyhouse.co/gem/css-mega-site-navigation

The problem I'm facing now is with the dropdown 2 only. It works fine on large screens however on smaller screens the dropdown doesn't show. I reckon it must be something to do with the CSS but not too sure what exactly. All the other dropdowns work just fine except that one in smaller screens. Any ideas on how to fix this?

This is the demo http://codepen.io/anon/pen/jPaKoG

HTML

<!-- NAVIGATION -->
  <nav class="cd-nav">
    <ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
      <li class="has-children"> <a href="#">Dropdown 1</a>
        <ul class="cd-secondary-nav is-hidden">
          <li class="go-back"><a href="#">Menu</a></li>
          <li class="see-all"></li>
          <li class="has-children"> <a href="#">Accessories</a>
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Clothing</a></li>
              <li class="see-all"><a href="#">All Accessories</a></li>
              <li class="has-children"> <a href="#">Beanies</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Accessories</a></li>
                  <li class="see-all"><a href="#">All Benies</a></li>
                  <li><a href="#">Caps &amp; Hats</a></li>
                  <li><a href="#">Gifts</a></li>
                  <li><a href="#">Scarves &amp; Snoods</a></li>
                </ul>
              </li>
              <li class="has-children"> <a href="#">Caps &amp; Hats</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Accessories</a></li>
                  <li class="see-all"><a href="#">All Caps &amp; Hats</a></li>
                  <li><a href="#">Beanies</a></li>
                  <li><a href="#">Caps</a></li>
                  <li><a href="#">Hats</a></li>
                </ul>
              </li>
              <li><a href="#">Glasses</a></li>
              <li><a href="#">Gloves</a></li>
              <li><a href="#">Jewellery</a></li>
              <li><a href="#">Scarves</a></li>
              <li><a href="#">Wallets</a></li>
              <li><a href="#">Watches</a></li>
            </ul>
          </li>
          <li class="has-children"> <a href="#">Bottoms</a>
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Clothing</a></li>
              <li class="see-all"><a href="#">All Bottoms</a></li>
              <li><a href="#">Casual Trousers</a></li>
              <li class="has-children"> <a href="#">Jeans</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Bottoms</a></li>
                  <li class="see-all"><a href="#">All Jeans</a></li>
                  <li><a href="#">Ripped</a></li>
                  <li><a href="#">Skinny</a></li>
                  <li><a href="#">Slim</a></li>
                  <li><a href="#">Straight</a></li>
                </ul>
              </li>
              <li><a href="#">Leggings</a></li>
              <li><a href="#">Shorts</a></li>
            </ul>
          </li>
          <li class="has-children"> <a href="#">Jackets</a>
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Clothing</a></li>
              <li class="see-all"><a href="#">All Jackets</a></li>
              <li><a href="#">Blazers</a></li>
              <li><a href="#">Bomber jackets</a></li>
              <li><a href="#">Denim Jackets</a></li>
              <li><a href="#">Duffle Coats</a></li>
              <li><a href="#">Leather Jackets</a></li>
              <li><a href="#">Parkas</a></li>
            </ul>
          </li>
          <li class="has-children"> <a href="#">Tops</a>
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Clothing</a></li>
              <li class="see-all"><a href="#">All Tops</a></li>
              <li><a href="#">Cardigans</a></li>
              <li><a href="#">Coats</a></li>
              <li><a href="#">Hoodies &amp; Sweatshirts</a></li>
              <li><a href="#">Jumpers</a></li>
              <li><a href="#">Polo Shirts</a></li>
              <li><a href="#">Shirts</a></li>
              <li class="has-children"> <a href="#">T-Shirts</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Tops</a></li>
                  <li class="see-all"><a href="#">All T-shirts</a></li>
                  <li><a href="#">Plain</a></li>
                  <li><a href="#">Print</a></li>
                  <li><a href="#">Striped</a></li>
                  <li><a href="#">Long sleeved</a></li>
                </ul>
              </li>
              <li><a href="#">Vests</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="has-children one-col"> <a href="#">Dropdown 2</a>
        <ul class="cd-secondary-nav is-hidden">
          <li class="go-back"><a href="#">Menu</a></li>
          <li class="has-children"> 
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Go back</a></li>
              <li class="has-children"> <a href="#">Beanies</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Go back</a></li>
                  <li class="see-all"><a href="#">All Benies</a></li>
                  <li><a href="#">Caps &amp; Hats</a></li>
                  <li><a href="#">Gifts</a></li>
                  <li><a href="#">Scarves &amp; Snoods</a></li>
                </ul>
              </li>
              <li><a href="#">Glasses</a></li>
              <li><a href="#">Gloves</a></li>
              <li><a href="#">Jewellery</a></li>
              <li><a href="#">Scarves</a></li>
              <li><a href="#">Wallets</a></li>
              <li><a href="#">Watches</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
  <!-- END NAVIGATION --> 
  <!-- MAIN CONTENT -->
  <div class="cd-main-content">
    <div class="cd-overlay"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna vel elementum laoreet. Aliquam erat volutpat. Ut eu mi venenatis, egestas leo vitae, gravida magna. Nullam nibh risus, tincidunt non eros eu, efficitur lobortis lectus. Sed vel neque pretium, porta ligula ac, congue tellus. Aliquam viverra neque turpis, eu porttitor velit molestie et. Phasellus vitae lorem nisi. Curabitur vel fringilla massa. Ut in suscipit magna. Nam vulputate lacinia congue. Mauris vitae sapien sem. Vivamus lobortis justo arcu, id porttitor metus semper in. Praesent turpis lorem, finibus et dolor quis, congue aliquet quam. Curabitur ac pellentesque orci, non ornare nulla.

Vestibulum quis ullamcorper sapien, non tempus metus. Proin nisi est, feugiat vulputate posuere nec, cursus eu lacus. Ut pellentesque tortor pellentesque ligula scelerisque, nec tristique lacus pellentesque. Vestibulum sollicitudin augue feugiat leo euismod, id cursus libero dapibus. Nulla vitae luctus nisi, tincidunt dictum tellus. Vestibulum porttitor porta est aliquam placerat. Aliquam pharetra luctus libero sit amet luctus. Morbi dignissim semper nibh sed euismod.</p>
  </div>
  <!-- END MAIN CONTENT -->

Answer 1

go-back buttons were causing the conflicts. In order to solve the conflict:

//submenu items - go back link
$('.go-back').on('click', function(){
    $(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').addClass('is-hidden').parent('li').parent('ul').removeClass('moves-out');
});

$('#back1').on('click', function(){
    $(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').addClass('is-hidden').parent('li').parent('ul').removeClass('moves-out');
});

I have also changed the sub-menu functionality to these: (due to is-hidden class needs to be removed one more line)

//open submenu
    $('.has-children').children('a').on('click', function(event){
        if( !checkWindowWidth() ) event.preventDefault();
        var selected = $(this);
        if( selected.next('ul').hasClass('is-hidden') ) {
            //desktop version only
            selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
      $('ul.cd-secondary-nav > li.has-children > ul.is-hidden').removeClass('is-hidden');
            selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
            $('.cd-overlay').addClass('is-visible');
        } else {
            selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
            $('.cd-overlay').removeClass('is-visible');
        }
        toggleSearch('close');
    });

Working demo