Javascript не работает кнопка для набвара

Question

Мой веб-сайт: https://afsadev.co Nabvar, в то время как мобильный просмотр я не могу нажимать и не отвечаю на id. Как любить, пожалуйста, помогите мне, я буду очень признателен ... Я использую этот код в html ........................... .................................................. ...........................................

$("#mobile-nav-button") .on("click",function(){
$("#main-nav") .toggleClass("open");
    $("#mobile-actions").toggleClass("nav-is-open");
});

.site-header .mobile-actions.nav-is-open .mobile-nav-button {
    background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#e52e71));
    background: linear-gradient(to right, #ff8a00, #e52e71)
}

.site-header .mobile-actions.nav-is-open .icon-close {
    display: block
}

.site-header .mobile-actions.nav-is-open .icon-burger {
    display: none
}

.site-header .mobile-actions>button {
    padding: 13px 22px;
    outline: 0;
    height: var(--nav-height)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="mobile-nav-button" class="mobile-nav-button">
<span class="screen-reader-text">Open Navigation</span>
<svg class="icon-burger" width="28px" height="28px">
<use xlink:href="#icon-burger"></use>
</svg>
<svg class="icon-close" width="28px" height="28px">
<use xlink:href="#icon-close"></use>
</svg>
</button>

<!-- begin snippet: js hide: false console: true babel: false -->

<nav class="main-nav" id="main-nav">
<ul class="main-sections">
<li class="articles">
<a href="hosting.php">
<img class="icon-nav-articles" src="images/icon/server.svg" width="56px" height="56px"  >

</img>
<span>Hosting</span>
</a>
</li>
..........

</ul>

Answer 1

нужно добавить свои html и jquery. Функция выглядит нормально

$("#mobile-nav-button") .on("click",function(){
$("#main-nav") .toggleClass("open");
    $("#mobile-actions").toggleClass("nav-is-open");
});

.site-header .mobile-actions.nav-is-open .mobile-nav-button {
    background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#e52e71));
    background: linear-gradient(to right, #ff8a00, #e52e71)
}

.site-header .mobile-actions.nav-is-open .icon-close {
    display: block
}

.site-header .mobile-actions.nav-is-open .icon-burger {
    display: none
}

.site-header .mobile-actions>button {
    padding: 13px 22px;
    outline: 0;
    height: var(--nav-height)
}

.open,.nav-is-open{
color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="mobile-nav-button" class="mobile-nav-button">
<span class="screen-reader-text">Open Navigation</span>
<svg class="icon-burger" width="28px" height="28px">
<use xlink:href="#icon-burger"></use>
</svg>
<svg class="icon-close" width="28px" height="28px">
<use xlink:href="#icon-close"></use>
</svg>
</button>

<div id='main-nav'>main-nav</div>
<div id='mobile-actions'>mobile-actons</div>

<!-- begin snippet: js hide: false console: true babel: false -->