Мое навигационное меню исчезает на экранах рабочего стола после нажатия меню гамбургера?

Question

Я попытался преобразовать код JS моего мобильного меню в jQuery, и это работает! Но это также создало две небольшие проблемы. Код jQuery не включен в фрагмент кода, поскольку он не будет повторять проблему. Я использую jQuery 3.4.1.

1. Навигационное меню на экранах планшетов и настольных ПК исчезает после нажатия меню мобильного устройства.

2. Меню гамбургера должно вращаться при нажатии, и теперь оно не двигается. (я использую сторонний код для эффекта анимации гамбургера, кстати)

Так как я не смог повторить проблему в фрагменте кода ниже вот оно в действии ---> https://imgur.com/a/4CRVjtV

Ниже приведен код. Он не выдает никаких ошибок консоли (если включен jQuery), так что мне нужно исправить?

// Sticky Navbar & Back to Top ---------------------------------- /
// -------------------------------------------------------------- /
const navbar = document.getElementById('navbar');
const topArrow = document.getElementById('backToTop');

window.onscroll = function () {
    stickyNav() 
};
function stickyNav() {
    if (window.pageYOffset > 0) {
        navbar.classList.add('stickyNav');
        topArrow.classList.add('showBackToTop');
    
    } else {
        navbar.classList.remove('stickyNav');
        topArrow.classList.remove('showBackToTop');
    }
}
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}


// Mobile Menu -------------------------------------------------- /
// -------------------------------------------------------------- /
// const hamburgerMenu = document.getElementsByClassName('hamburger')[0];
// const navbarMenu = document.getElementsByClassName('navMenu')[0];

// hamburgerMenu.addEventListener('click', () => {
//     hamburgerMenu.classList.toggle('is-active')
//     navbarMenu.classList.toggle('active')
// });

$('.hamburger').on('click', () => {
    $(this).toggle('is-active');
    $('.navMenu').toggle('active');
});

/* Universal  ---------------------------------------------------------- */
/* --------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 1em;
    border-radius: 10px;
}

button:hover {
    cursor: pointer;
    background-color: #00cee993;
    transition: .2s ease;
    transform: scale(1.1);
}

.moreQuestionsButton:hover {
    background-color: #00e90c93;
}

fieldset {
    border: none;
}

.card {
    border: 1px solid red;
    color: #222;
}

nav,
body,
button {
    font-family: 'Comfortaa', sans-serif;
}

#navbar {
    display: flex;
    position: absolute;
    width: 100%;
    top: 0;
    justify-content: space-between;
    align-items: center;
    background-color: #f3f3f3;
}

.stickyNav {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: #333 0 1px 10px;
    transition: .08s ease;
}

#backToTop {
    display: none;
    position: fixed;
    width: 50px;
    height: auto;
    right: 35px;
    bottom: 35px;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50px;
    padding: 10px;
}

#backToTop:hover {
    transform: scale(1.1);
    transition: ease .25s;
    background-color: #00cee9;
}

.showBackToTop {
    display: block !important;
}

.brandLogo {
    font-size: 1.5rem;
    margin: 1rem;
}

.brandLogo a {
    text-decoration: none;
    color: #333;
}

.brandLogo:hover {
    opacity: 0.7;
    transition: ease .15s;
}

.navMenu {
    color: #333;
}

.navMenu ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.navMenu li {
    list-style: none;
    margin: 0 5px;
    display: block;
}

.navMenu li a {
    text-decoration: none;
    color: #333;
    padding: 1rem;
    display: block;
}

.navMenu li:hover {
    background-color: #00cee993;
    right: 200px;
    transition: ease-out .15s;
}

.hamburger {
    position: absolute;
    top: .15rem;
    right: .5rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    margin: .4rem;
}

.cardContainer {
    margin-top: 90px !important;
}

.centerText {
    text-align: center;
}

label, input {
    padding: 7px;
}

label {
    float: left;
}

input {
    float: right;
    width: 60%;
}



/* Mobile  ---------------------------------------------------------- */
/* ------------------------------------------------------------------ */
@media (min-width: 320px) {
    @media (max-width: 768px) {
        .hamburger {
            display: flex;
        }

        .navMenu {
            display: none;
            width: 100%;
        }

        #navbar {
            flex-direction: column;
            align-items: flex-start;
        }

        .navMenu ul {
            display: block;
            flex-direction: column;
            width: 100%;
        }

        .navMenu li {
            text-align: center;
            font-size: 1.2rem;
            margin: 5px 0;
        }

        .navMenu.active {
            display: flex;
        }

    }

    .cardContainer {
        width: 85%;
        margin: auto;
    }

    .cardContainer .card {
        margin: 0 auto;
        padding: 10px 30px;
        width: 100%;
    }


}

/* Tablet  ---------------------------------------------------------- */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .hamburger {
        display: none !important;
    }

    .cardContainer {
        max-width: 70%;
    }

}

@media (min-width: 1024px) {
    .cardContainer {
        max-width: 60%;
    }
}


/* -------------------------------------------------------------- /
// ---------------------- HAMBURGER CODE BELOW ------------------ /
// ------------------------------------------------------------- */


/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger.is-active:hover {
  opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #333;
}

.hamburger-box {
  width: 35px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 30px;
  height: 4px;
  background-color: #333;
  border-radius: 10px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}


/* Spin */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.15s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.15s ease-in, transform 0.12s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.12s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

Answer 1

это довольно просто, вам просто нужно добавить следующую строку кода в ваш файл стиля.

Когда вы нажимаете на значок гамбургера для встроенного стиля, примененного в меню, этот стиль переопределяет встроенный стиль на большом экран

https://www.screencast.com/t/EBoUMjwjsp

@media (min-width: 767px) {
 .navMenu {
   display: block !important;
 }
}

Answer 2

Используйте следующий код: - Используйте toggleClass вместо toggle

$('.hamburger').on('click', () => {
    $(this).toggleClass('is-active');
    $('.navMenu').toggleClass('active');
});