2

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 -->
Nesta
  • 988
  • 2
  • 16
  • 44

1 Answers1

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

yakutsa
  • 642
  • 3
  • 13
  • Cool... almost there. The problem now is when I click on Go Back it takes me back to the empty menu with the "< Menu" button on top... – Nesta Jul 03 '15 at 13:01
  • @Tiago, I made an edit to my reply according to your remark. – yakutsa Jul 03 '15 at 13:45
  • Great stuff. that issue I mentioned is fixed now however I've found another issue that happens when you click Dropdown 2 > Beanies then when you click on Go back it takes you back to the empty Menu and if you click on – Nesta Jul 03 '15 at 13:49
  • 1
    @Tiago, I updated the codes. So is this working now? – yakutsa Jul 03 '15 at 14:04
  • I don't know why but the Dropdown 1 is getting affected by the changes. If you open Dropdown 1 you'll see. Then if you try to go back it behaves weird. However the Dropdown 2 is just fine now ;) – Nesta Jul 03 '15 at 14:17
  • It's almost there. Thank you for your time. Very appreciated! – Nesta Jul 03 '15 at 17:08
  • @Tiago, could you please check one more time? I updated my codes. :) – yakutsa Jul 03 '15 at 18:10
  • Absolutely brilliant mate! It works like a charm! Thank you so much for helping me!! – Nesta Jul 03 '15 at 21:48
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82339/discussion-between-tiago-and-yakutsa). – Nesta Jul 03 '15 at 22:11