En mi sitio web de Drupal 9, activé el tema predeterminado de Olivero. Aquí hay una demostración:

https://remolcador-aqrmztryfqsezpvnghut1cszck2wwasr.tugboatqa.com/

Agregué a mi subtema, el siguiente código:

secuencia de comandos.js:

 (function ($, Drupal, window, document) { $(document).ready(function () { window.addEventListener("scroll", function() { if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) { document.getElementById("site-header__inner").style.boxShadow = "-36px 1px 36px rgb(0 0 0 / 8%)"; } else { document.getElementById("site-header__inner").style.boxShadow = "none"; } }); }); })(jQuery, Drupal, this, this.document);

El problema es que el estilo se aplica al menú del móvil y al menú del escritorio. ¿Cómo se aplica este código solo al menú móvil?

Cuando inspecciono la página, encuentro esto en css, pero no sé cómo usarlo para la solución de mi pregunta:

 @media (min-width: 75rem) body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .site-header__fixable.is-fixed { top: 0.4375rem; }