Header menu functions with JavaScript

If smth do not work, check modifier in HTML and try remove it.

You really want to use position: sticky for this. Scroll events and Intersection Observers are async, and will cause elements to jump if you try to toggle their position in JavaScript (depending on device).

https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning

https://dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3

'use strict';

// toggle menu

const nav = document.querySelector('.toggle__menu-btns'); // hidden menu

const navMenu = document.querySelector('.toggle__menu'); // switch on/off

const links = nav.querySelectorAll('a'); // menu buttons/links

// listen click on menu

navMenu.addEventListener('click', () => {

  nav.classList.toggle('nav__open'); // transform: translateX(-100%);

  navMenu.classList.toggle('toggle'); // span animation

});

// listen click on every 'a'/button

links.forEach((link) => {

  link.addEventListener('click', () => {

    nav.classList.toggle('nav__open'); // transform: translateX(-100%);

    navMenu.classList.toggle('toggle'); // span animation

  });

});

https://webdesign.tutsplus.com/tutorials/how-to-hide-reveal-a-sticky-header-on-scroll-with-javascript--cms-33756