Only run JQuery on mobile view
<p>I'm kinda new to JavaScript overall, and I've made a script by myself which is supposed to add classes to other classes on click.</p>

<p>Now the problem I have is that the code is supposed to work for the mobile view only (under 800px width) which works well, but when I resize the window to something above, after using the script it is still active.</p>

<p>Script: </p>

<pre><code>$(document).ready(function() { 
    if ($(window).width() &lt;=800 ) {
        $('.mobileNavButton').click(function() {
            $('.mainNav').toggleClass('active');
            $('.mobileNavButton').toggleClass('active');
        });
        $('.hasDropdown').click(function() {
            $('.dropdown').toggle('slide');
            $('.dropdown').toggleClass('active');
            $('.hasDropdown').toggleClass('rotate');
        });
        $('.hasSubDropdown').click(function() {
            $('.subDropdown').toggle('slide');
            $('.subDropdown').toggleClass('active');
            $('.hasSubDropdown').toggleClass('rotate');
        });
    }
});
</code></pre>

<p>You guys all helped me out a lot!
Thanks!</p>