submenu de menu fijo, no se queda arriba

[elpre]

Buenos días,

he realizado un menú que al hacer scrool hacia abajo, se queda fijo arriba.

Funciona también en móvil con la hamburguesa, pero hay un problema y es que el menú tiene submenus, y si estoy con móvil, al hacer scroll hacia abajo, si le doy a la hamburguesa para que aparezcan los submenús, se me va arriba la página y el submenú se me queda donde me había quedado en el scroll, no sé si me explico.

He realizado esto (es con shopify pero la parte de javascript y html es la misma):

Código:

<header id="header" class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">

<style>
    .header-fijo{
      position: fixed;     
      top: 0;
      width: 100%;
      z-index: 999;
    }
</style>


<script type="text/javascript">
      $(document).ready(function() {  
        // check where the shoppingcart-div is  
        var offset = $('#header').offset();  
        $(window).scroll(function () {    
            var scrollTop = $(window).scrollTop(); 
            // check the visible top of the browser     
            if (offset.top<scrollTop-60) {
                $('#header').addClass('header-fijo'); 
            } else {
                $('#header').removeClass('header-fijo');   

            }
        }); 
    }); 
</script>

No sé si se puede poner la página, si no se puede la borro, pero es para que veais mejor lo que pasa al hacer scroll en movil:
https://www.hairstocks.com/

Como comento, lo que he hecho funciona y en escritorio los submenu se quedan arriba, pero con movil, al usar la hamburguesa, pues no.

A ver si podéis echarme una mano.

Gracias y un saludo