Liquid, JavaScript, themes, sales channels
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>
Solved! Go to the solution
This is an accepted solution.
Well, you didn't said that...
There are options:
I'd suggest to undo edits and use option #2
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.
Thank you that stopped the auto dropdown. But I don't want the image I just want the collection title. No image.
This is an accepted solution.
Well, you didn't said that...
There are options:
I'd suggest to undo edits and use option #2
Thank you that worked. Can I ask you a question? Why did the menu auto drop when the sub nav link had an image?
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...
thank you again just sent you an email
matthew
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024