Why does my menu Auto drop down

Solved
Life1134
New Member
5 0 0

When I add a child link or a sub nav to my main menu and that sub navs collection has a collection image the menu automatically shows the image of the sub nav collection when the page loads.  Here is a link to my site https://themugaffair.com/

The collection that has the sub nav is called Artist & Collabs

I have also found the code that controls the sub nav image but when I comment that code out no drop-down menu shows. 

If I add the sub nav to the menu and the collection does not have a collection image the menu with drop dows works just fine.

How can I get it to stop auto-opening when the collection has a Collection image?

 

This only happens on Desktop mobile it works just fine.

Here it the code

 

<nav>
  <ul>
    {% for link in linklists.main-menu.links %}
    {% assign childlink_handle = link.title | handle %}
    {% if linklists[childlink_handle] and linklists[childlink_handle].links.size > 0 %}
    <li class="angle-shape"><a href="{{ link.url }}">{{ link.title }}</a>
      <ul class="disturb_menu d-none">
        {% for childlink in linklists[childlink_handle].links %}
        {% assign grand_childlink_handle = childlink.title | handle %}
        {% if linklists[grand_childlink_handle] and linklists[grand_childlink_handle].links.size > 0 %}
        <li class="mega-menu-li"><a class="menu-title" href="{{ childlink.url }}">{{ childlink.title }}</a>
          <ul>
            {% for grand_childlink in linklists[grand_childlink_handle].links %}
            <li><a href="{{ grand_childlink.url }}">{{ grand_childlink.title }}</a></li>
            {% endfor %}
          </ul>
        </li>
        {% elsif childlink.type == "collection_link" and childlink.object.image %}
        <li class="sub-menu mega-menu-img">
          <a href="{{ childlink.url }}"><img src="{{ childlink.object.image | img_url: 'large' }}" alt="{{ childlink.object.image.alt }}" /></a>
        </li>
        {% else %}
        <li class="sub-menu-li"><a href="{{ childlink.url }}">{{ childlink.title }}</a></li>
        {% endif %}  
        {% endfor %}
      </ul>
    </li>
    {% else %}
    <li class="angle-shape"><a href="{{ link.url }}">{{ link.title }}</a></li>
    {% endif %}
    {% endfor %}
  </ul>
</nav>


<script>	
  setTimeout(function(){
    $('.disturb_menu').removeClass('d-none');
  }, 2000);

                 
  $('.mega-menu-li').parent('ul').addClass('mega-menu');
  $('.sub-menu-li').parent('ul').addClass('submenu');
</script>

 

 

0 Likes
tim
Shopify Expert
2852 117 936

Oh, those Themeforest themes made of sticks and twine... Have you tried to contact theme support?

You may try to change this line

  $('.mega-menu-li').parent('ul').addClass('mega-menu');

to

  $('.mega-menu-li, .mega-menu-img').parent('ul').addClass('mega-menu');

 Or, 

this line

 $('.sub-menu-li').parent('ul').addClass('submenu');

to this

 $('.sub-menu-li, .mega-menu-img').parent('ul').addClass('submenu');

 

and see which one you like more.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Life1134
New Member
5 0 0

Thank you that stopped the auto dropdown. But I don't want the image I just want the collection title. No image.

0 Likes
tim
Shopify Expert
2852 117 936

This is an accepted solution.

Well, you didn't said that...

There are options:

  1. Remove collection image;
  2. or, When adding links to menu, do not select collection, but type/paste an address of collection page, like /collections/w42st-magazine
    This way system will not know that this is a link to collection and wouldn't try to use image;
  3. or, Edit code...

I'd suggest to undo edits and use option #2

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Life1134
New Member
5 0 0

Thank you that worked. Can I ask you a question? Why did the menu auto drop when the sub nav link had an image?

 

0 Likes
tim
Shopify Expert
2852 117 936

Mate, you were fast

Cause CSS rules to hide (and show on hover) submenu apply only when top-level link has either "submenu" or "mega-menu" class, and these classes are assigned by  those lines of javascript I suggested to edit. And they did not cover your case.

Why they've forgotten it why they've decided to do the menu this way is beyond my understanding. Can only repeat:

Oh, those Themeforest themes made of sticks and twine... 

Oftentimes I have a feeling that they just put them together, publish for sale, but never test...

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Life1134
New Member
5 0 0

thank you again just sent you an email

 

matthew 

0 Likes