Mobile Version Of The Drop Down Menu Doesn't Work Correctly

[ipekum]

2 0 0

Hello,

My dropdown menu doesn't work correctly on mobile, it's supposed to expand and show the sub categories but instead it redirects to the main collection.

 <i class="fa fa-bars dropdown-toggle icon"></i> is there on the header.liquid but somehow it doesn't work. 

I can also add my mainmenu-mobile.liquid if needed  (Not sure if it's the source of the problem)

Would be great if you could help

Thanks in advance 🙂

Ipek

[ipekum]

Hello,

My dropdown menu doesn't work correctly on mobile, it's supposed to expand and show the sub categories but instead it redirects to the main collection.

 <i class="fa fa-bars dropdown-toggle icon"></i> is there on the header.liquid but somehow it doesn't work. 

I can also add my mainmenu-mobile.liquid if needed  (Not sure if it's the source of the problem)

Would be great if you could help

Thanks in advance 🙂

Ipek

[diego_ezfy · Accepted solution]

There is a typo in my code, sorry, please replace all code with this:

<script>
function mobileFix(){

    var a = document.querySelectorAll(`.has-child .site-nav-link`);

    if (!a){
        return;
    }
    for (var each of a){
    each.addEventListener('click',function(el){
    el.preventDefault();
    el.target.classList.toggle('show--dropdown');
    });
    }
}

mobileFix();
</script>

<style>
@media (max-width:767px){
    .header .nou_megamenu{
    width: 100% !important; 
}
.show--dropdown + .sub-menu-dropdown{
    display: block !important;
}
}
</style>