Адаптивный сайт Nav Toggle не отвечает

Question

Я создаю адаптивную веб-страницу для учебного заведения. Я использовал бесплатный кредитный шаблон, доступный для дизайнера.

В мобильном представлении, когда я прокручиваюсь в Chrome (адресная строка скрывается под снимком экрана ниже).) затем синий навигационный переключатель цвета (menubar) не реагирует.

После прокрутки вниз (теперь адресная строка видна под снимком ниже) Переключатель навигации работает нормально.

Мой код JS

$.fn.dropdownMenu = function(opt) {
return $(this).each(function() {
    var el = $(this),
        optsDefault = {
            menuClass: 'dropdown-menu-list',
            breakpoint: 1000,
            toggleClass: 'active',
            classButtonToggle: 'toggle-menu',
            subMenu: {
                class: 'sub-menu',
                parentClass: 'menu-item-has-children',
                toggleClass: 'active'
            }
        },
        options = $.extend({}, optsDefault, opt);
    el.on('dropdownMenu', function() {
        $('.' + options.classButtonToggle, el).on('click', function(e) {
            e.stopPropagation();
            $('.' + options.menuClass, el).toggleClass(options.toggleClass);
        });
        $('.' + options.subMenu.parentClass, el).on('click', '> a', function(e) {
            e.preventDefault();
            var self = $(this);
            self.next('.' + options.subMenu.class).slideToggle(400);
            self.parent().toggleClass(options.subMenu.toggleClass);
        });
        $(document).on('click', function() {
            $('.' + options.menuClass, el).removeClass(options.toggleClass);
            $('.' + options.subMenu.parentClass, el).removeClass(options.subMenu.toggleClass);
            $('.' + options.subMenu.class, el).hide();
        });
        $('.' + options.menuClass).on('click', function(e) {
            e.stopPropagation();
        });
    });
    if (window.innerWidth <= options.breakpoint) {
        el.trigger('dropdownMenu');
    }
    $(window).resize(function() {
        if (window.innerWidth <= options.breakpoint) {
            el.trigger('dropdownMenu');
        } else {
            $('.' + options.classButtonToggle, el).off('click');
            $('.' + options.subMenu.parentClass, el).off('click', '> a');
            $('html, body').off('click');
            $('.' + options.menuClass).off('click');
        }
    });
});

}

Мой Html-код

<div class="page-wrap">

        <!-- header -->
        <header class="header header--fixed">
            <div class="container">
                <div class="header__inner">
                    <div class="header__logo">Wisdom Learning<a href="index.html"><!--<img src="assets/img/logo.png" alt=""/>--></a></div>
                    <div class="header__menu">

                        <!-- onepage-nav -->
                        <nav class="onepage-nav">

                            <!-- onepage-menu -->
                            <ul class="onepage-menu">
                                <li class="current-menu-item"><a href="#id-1">Home</a>
                                </li>
                                <li><a href="#id-2">About</a>
                                </li>
                                <li><a href="#id-3">Products</a>


                                </li>
                                <li><a href="#id-4">Press</a>
                                </li>
                                <li><a href="#id-5">Contact</a>
                                </li>
                            </ul><!-- onepage-menu -->

                            <div class="navbar-toggle"><span></span><span></span><span></span></div>
                        </nav><!-- End / onepage-nav -->

                    </div>
                </div>
            </div>
        </header><!-- End / header -->

        <!-- Content-->
        <div class="md-content">

            <!-- hero -->
            <div class="hero" id="id-1" style="background-image: url('assets/img/bg/1.jpg');">
                <div class="hero__wrapper">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-8 ">
                                <h1 class="hero__title">We make learning<br/>


                                    <!-- typing__module -->
                                    <div class="typing__module" data-options='{"typeSpeed":60}'>
                                        <div class="typed-strings"><span>Interactive</span><span>Easy</span><span>Fun</span>
                                        </div><span class="typed"></span>
                                    </div><!-- End / typing__module -->

                                </h1>

                            </div>
                        </div><span id="back-to-down">Know more</span>
                    </div>
                </div>
            </div><!-- End / hero -->


            <!-- Section -->
            <section class="md-section bg-gray" id="id-2">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-5 ">

                            <!-- slide-image -->
                            <div class="slide-image">

                                <!-- swiper__module swiper-container -->
                                <div class="swiper__module swiper-container slide-image__front" data-options='{"slidesPerView":1,"spaceBetween":0}'>
                                    <div class="swiper-wrapper">
                                        <div class="slide-item" style="background-image: url('assets/img/about/1.jpg');"></div>
                                        <div class="slide-item" style="background-image: url('assets/img/about/2.jpg');"></div>
                                        <div class="slide-item" style="background-image: url('assets/img/about/3.jpg');"></div>
                                    </div>
                                    <div class="swiper-pagination-custom"></div>
                                </div><!-- End / swiper__module swiper-container -->


                                <!-- swiper-thumbnails__module swiper-container -->
                                <div class="swiper-thumbnails__module swiper-container slide-image__black" data-options='{"slidesPerView":1,"spaceBetween":0,"delay":10000}'>
                                    <div class="swiper-wrapper">
                                        <div class="slide-item" style="background-image: url('assets/img/about/1b.jpg');"></div>
                                        <div class="slide-item" style="background-image: url('assets/img/about/2b.jpg');"></div>
                                        <div class="slide-item" style="background-image: url('assets/img/about/3b.jpg');"></div>
                                    </div>
                                </div><!-- End / swiper-thumbnails__module swiper-container -->

                            </div><!-- End / slide-image -->

                        </div>

иКод CSS

.onepage-nav {
z-index: 999;}    

.onepage-nav ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
}

.onepage-nav li {
position: relative;
z-index: 9;
}

.onepage-nav li a {
display: block;
position: relative;
text-decoration: none;
}

@media (min-width: 1201px) {
.onepage-nav {
    text-align: center;
}

.onepage-nav li:hover > a {
    color: #19c2c9;
}

.onepage-nav .onepage-menu .sub-menu {
    opacity: 0;
    visibility: hidden;
}

.onepage-nav .onepage-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.onepage-nav .onepage-menu a {
    padding: 20px 30px;
}

.onepage-nav .onepage-menu .sub-menu {
    text-align: left;
    padding: 0 2px;
}

.onepage-nav .onepage-menu .sub-menu li {
    background-color: #111;
}

.onepage-nav .onepage-menu .sub-menu li:first-child {
    padding-top: 18px;
}

.onepage-nav .onepage-menu .sub-menu li:last-child {
    padding-bottom: 18px;
}

.onepage-nav .onepage-menu .sub-menu a {
    color: #eee;
    padding: 2px 25px;
}

.onepage-nav .onepage-menu .sub-menu a:after {
    right: 15px;
}

.onepage-nav .onepage-menu > li {
    display: inline-block;
}

.onepage-nav .onepage-menu a {
    font-size: 16px;
    color: #748182;
    transition: all 300ms ease;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    padding: 10px 20px;
}

.onepage-nav .onepage-menu .sub-menu {
    display: block !important;
}

.onepage-nav .onepage-menu .sub-menu .current-menu-parent > a,
.onepage-nav .onepage-menu .sub-menu .current-menu-item > a {
    color: #19c2c9;
}

.onepage-nav .onepage-menu .current-menu-parent > a,
.onepage-nav .onepage-menu .current-menu-item > a {
    color: #19c2c9;
}

.onepage-nav .onepage-menu .sub-menu {
    width: 200px;
    position: absolute;
    top: 100%;
    z-index: -1;
    left: 0;
    transition: all 300ms ease;
}

.onepage-nav .onepage-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

.onepage-nav .onepage-menu .sub-menu li > a {
    font-size: 14px;
    transition: all 300ms ease;
}

.onepage-nav .onepage-menu .sub-menu li:hover > a {
    color: #4aa8ff;
}

.onepage-nav .onepage-toggle-menu {
    display: none;
}
}

@media (max-width: 1200px) {
.onepage-nav .onepage-menu {
    position: fixed;
    top: 0;
    will-change: transform;
}

.onepage-nav .onepage-menu a {
    font-size: 14px;
}

.onepage-nav .onepage-menu a:after {
    right: 0;
    width: 50px;
    text-align: center;
}

.onepage-nav .onepage-menu .sub-menu {
    display: none;
}

.onepage-nav .onepage-menu {
    background-color: #111;
}

.onepage-nav .onepage-menu a {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #eee;
}

.onepage-nav .onepage-menu a:after {
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.onepage-nav .onepage-menu {
    left: 0;
    width: 280px;
    background-color: #111;
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
}

.onepage-nav .active.onepage-menu {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}

.onepage-nav .onepage-menu {
    z-index: 99999;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    width: 300px;
    transition: all 300ms ease;
}

.onepage-nav .onepage-menu li {
    position: relative;
}

.onepage-nav .onepage-menu a {
    padding: 12px 15px;
    font-size: 16px;
    text-transform: capitalize;
    color: #748182;
}

.onepage-nav .onepage-menu a:hover {
    color: #fff;
}

.onepage-nav .onepage-menu .active > a {
    color: #fff;
}

.onepage-nav .onepage-menu .current-menu-parent > a,
.onepage-nav .onepage-menu .current-menu-item > a {
    color: #fff;
}

.onepage-nav .onepage-menu .sub-menu a {
    padding: 12px 15px;
}

.onepage-nav .onepage-menu .sub-menu .menu-item-has-children > a:hover {
    color: #4aa8ff;
}

.onepage-nav .onepage-menu .sub-menu .menu-item-has-children.active > a {
    color: #4aa8ff;
}

.onepage-nav .onepage-toggle-menu {
    display: block;
}
}

.onepage-nav {
display: inline-block;
vertical-align: middle;
}

.onepage-nav li.current a {
color: #19c2c9;
}

.onepage-menu.active ~ .navbar-toggle span:nth-child(1) {
top: 10px;
-webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
}

.onepage-menu.active ~ .navbar-toggle span:nth-child(2) {
opacity: 0;
left: -40px;
}

.onepage-menu.active ~ .navbar-toggle span:nth-child(3) {
top: 10px;
-webkit-transform: rotate(45deg);
        transform: rotate(45deg);
}

Я думаю, что его связь между событием щелчка и положением моей навигационной панели имеет некоторую проблему. Пожалуйста, помогите с решением, так как переключатель Nav должен работать все время, независимо от его положения.

Ссылка на мою веб-страницу: здесь