My code on toggle is not working as on the Youtube video (https://www.youtube.com/watch?v=QDbjsABOnAU) I am watching, toggleClass is not working.

Here is my js code:

$(document).ready(function() {

    $('#menu').click(function(){
        $(this).toggleClass('fa-times');
        $('header').toggleClass('toggle');
    });

    $(window).on('scroll load', function() {

        $('#menu').removeClass('fa-times');
        $('header').removeClass('toggle');
    });
});

Here is my scss:

@media (max-width:991px) {
    header {
        left:-120%;

        .toggle {
            left:0%;
        }
    }

    #menu {
        display: block;
    }
}

Here is the git link for the full code: https://github.com/genius101/FrontEnd_Projs/tree/main/site/v2

Would look to hear your feedback.

CodePudding user response：

You have missed & before .toggle

@media (max-width:991px) {
header {
    left:-120%;

    &.toggle {
        left:0%;
    }
}

#menu {
    display: block;
}

}