I have a few different jQuery slideToggles on my site and I have no issue but the mobile navigation menu I can't seem to work. I have it working fine on my local site but on my live site nothing happens.

My live site is https://toolcurve.com

<ul class="menu">
    <li class="item"><a href="">Main menu link</a>
        <img src="drop-chev.svg" class="sub-menu-drop ">
        <ul class="dropdown">
            <li class="sub-item"><a href=""></a>Sub Menu Link</li>
            <li class="sub-item"><a href=""></a>Sub Menu Link</li>
        </ul>
    </li>
    <li class="item"><a href="">Main menu link</a>
    <img src="drop-chev.svg" class="sub-menu-drop ">
        <ul class="dropdown">
            <li class="sub-item"><a href=""></a>Sub Menu Link</li>
            <li class="sub-item"><a href=""></a>Sub Menu Link</li>
        </ul>
    </li>
</ul>

The JS I use is

$(function(){
        if (window.innerWidth < 768){
        var $submenu = $(".dropdown");
        $(".sub-menu-drop").on("click", function(e){
            $(this).next($submenu).slideToggle();
        });
        }
    });

This is very similar to the other slideToggles i have on my site which all work fine but I just seem to get this one to work on my live site, but it does work fine on my local site.