Hamburger Navigation Menu Fails to Open on Click

The menu hamburger appears on both mobile and desktop when I shrink the window. The problem is that its functionality does not work and nothing happens when I click on it. Ultimately, when clicked, a menu should expand. Any help on this topic welcome.

Additional note:
Interesting fact that when I open the link to the page via Instagram hamburger menu works. When I open directly from the browser (I tested Safari and Chrome), the hamburger is visible, but when I click it doesn’t work.

<!-- header -->
<header id="site-header" class="fixed-header">
    
    <div class="header-main">
        <div class="container">

            <div class="header-inner clearfix">
        
                <div class="medium-header-container">
                
                    <!-- Site logo -->
                    <a href="/" id="site-logo"></a>
                    
                    <!-- Mobile burger icon -->
                    <div id="mobile-nav-button" class="hidden-desk hidden-tab">
                        <div id="mobile-nav-icon">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    
                </div>
                
                <!-- header nav menu -->
                <nav id="header-nav">
                
                    <ul id="nav-ul" class="menu font-montserrat-reg clearfix">
                    
                        <!-- Nav item - single tier drop down -->
                        <li class="menu-item menu-item-has-children">
                            <a href="/">Home</a>
                        </li>
                                            
                        <!-- Nav item - single tier drop down -->
                        <li class="menu-item menu-item-has-children">
                            <a href="portfolio.html">Portfolio</a>
                        </li>
                        
                        <!-- Nav item - single tier drop down -->
                        <li class="menu-item menu-item-has-children">
                            <a href="video.html">Video</a>
                        </li>
                        
                        <!-- Nav item - no drop down -->
                        <li class="menu-item menu-item-has-children">
                            <a href="about.html">About</a>
                        </li>
                        
                        <!-- Nav item - with two tier drop down -->
                        <li class="menu-item menu-item-has-children">
                            <a href="blog.html/">Blog</a>
                        </li>
                            
                        <!-- Nav item - single tier drop down -->
                        <li class="menu-item menu-item-has-children">
                            <a href="contact.html">Contact</a>
                        </li>
                        
                    </ul>
                
                </nav>
                
            </div>
            
        </div>
    </div>

</header>

I am sharing js code too:

    // Mobile nav menu
    intent_theme.mobile_nav_menu = function(){
    
        /* -- nav menu button click -- */
        $( '#mobile-nav-button' ).click(function(e) {
            e.preventDefault();
            
            $('#mobile-nav-button').toggleClass('active');
            
            $('#site-header,#header-nav,#main-content,.header-inner,footer').toggleClass('menu-active');

        });
        
        
        /* -- mobile drop down menu(s) -- */
        $('.sub-drop-icon').on('click', function(e) {
        
            e.preventDefault();
        
            if(!isXLarge()) {
                if (!$(this).hasClass('sub-second-drop')){
                    // first level drop down
                    $(this).parents('.menu-item').find('> .sub-menu-first').slideToggle(250).toggleClass('opened');
                } else { 
                    // second level drop down
                    $(this).parents('.menu-item').find('> .sub-second-tier').slideToggle(250).toggleClass('opened');
                }
                
                $(this).toggleClass('fa fa-angle-down fa fa-angle-up');
            
            }

        });
        
        
        // close the mobile push menu when click on content
        $('#main-content,footer').on('click', function() {
            
            // check if push menu is open
            if($('#mobile-nav-button').hasClass('active')){
                // hide the push menu
                $('#header-nav,#main-content,.header-inner,footer').removeClass('menu-active');
                $('#mobile-nav-button').removeClass('active');
            }
            
        });
        
    }