javascript - Cannot collapse a responsive menu in Wordpress

Question

I am new to website development so I am testing with some responsive menu to see how it works in Wordpress. I have selected this menu and it works perfectly in the demo. Yet, when I apply the code to my site, the menu bar cannot be collapsed. class="navbar-collapse collapse show" the show in this class cannot be removed properly. [You can see it while inspecting the page : https://gttutor.com/test/ May I know how should I fix it? Thanks!

<div class="navbar-collapse collapse show" id="navbarSupportedContent" style="padding-right: 0px;">
            <ul class="navbar-nav ml-auto">
                
        </div>

<nav class="navbar navbar-expand-lg navbar-mainbg" style="
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;">
        <a class="navbar-brand navbar-logo" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars text-white"></i>
        </button>
        <div class="navbar-collapse collapse" id="navbarSupportedContent" style="padding-right: 0px;">
            <ul class="navbar-nav ml-auto">
                <div class="hori-selector"><div class="left"></div><div class="right"></div></div>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
                </li>
            </ul>
        </div>
    </nav>

    <script>
          // ---------Responsive-navbar-active-animation-----------
        function test(){
          var tabsNewAnim = $('#navbarSupportedContent');
          var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
          var activeItemNewAnim = tabsNewAnim.find('.active');
          var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
          var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
          var itemPosNewAnimTop = activeItemNewAnim.position();
          var itemPosNewAnimLeft = activeItemNewAnim.position();
          $(".hori-selector").css({
            "top":itemPosNewAnimTop.top + "px", 
            "left":itemPosNewAnimLeft.left + "px",
            "height": activeWidthNewAnimHeight + "px",
            "width": activeWidthNewAnimWidth + "px"
          });
          
          $("#navbarSupportedContent").on("click","li",function(e){
            $('#navbarSupportedContent ul li').removeClass("active");
            $(this).addClass('active');
            var activeWidthNewAnimHeight = $(this).innerHeight();
            var activeWidthNewAnimWidth = $(this).innerWidth();
            var itemPosNewAnimTop = $(this).position();
            var itemPosNewAnimLeft = $(this).position();
            $(".hori-selector").css({
              "top":itemPosNewAnimTop.top + "px", 
              "left":itemPosNewAnimLeft.left + "px",
              "height": activeWidthNewAnimHeight + "px",
              "width": activeWidthNewAnimWidth + "px"
            });
          });
        }
        $(document).ready(function(){
          setTimeout(function(){ test(); });
        });
        $(window).on('resize', function(){
          setTimeout(function(){ test(); }, 500);
        });
        $(".navbar-toggler").click(function(){
          setTimeout(function(){ test(); });
        });
    </script>

Method from Rank:

( function test( $ ){
          var tabsNewAnim = $('#navbarSupportedContent');
          var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
          var activeItemNewAnim = tabsNewAnim.find('.active');
          var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
          var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
          var itemPosNewAnimTop = activeItemNewAnim.position();
          var itemPosNewAnimLeft = activeItemNewAnim.position();
          $(".hori-selector").css({
            "top":itemPosNewAnimTop.top + "px", 
            "left":itemPosNewAnimLeft.left + "px",
            "height": activeWidthNewAnimHeight + "px",
            "width": activeWidthNewAnimWidth + "px"
          });
          
          $("#navbarSupportedContent").on("click","li",function(e){
            $('#navbarSupportedContent ul li').removeClass("active");
            $(this).addClass('active');
            var activeWidthNewAnimHeight = $(this).innerHeight();
            var activeWidthNewAnimWidth = $(this).innerWidth();
            var itemPosNewAnimTop = $(this).position();
            var itemPosNewAnimLeft = $(this).position();
            $(".hori-selector").css({
              "top":itemPosNewAnimTop.top + "px", 
              "left":itemPosNewAnimLeft.left + "px",
              "height": activeWidthNewAnimHeight + "px",
              "width": activeWidthNewAnimWidth + "px"
            });
          });
        }
        $(document).ready(function(){
          setTimeout(function(){ test(); });
        });
        $(window).on('resize', function(){
          setTimeout(function(){ test(); }, 500);
        });
        $(".navbar-toggler").click(function(){
          setTimeout(function(){ test(); });
        }(jQuery));

Answer 1

Your navbar-toggler button doesn't have any toggle class code. Instead, there is an empty setTimeout() defined. Try to change it like this.

$('.navbar-toggler').on('click', function(e) {
      $('#navbarSupportedContent').toggleClass("show");
      e.preventDefault();
    });