Header qui remonte après translateX du body

Bonjour à tous,

Je travaille sur un site avec wordpress et woocommerce. Au niveau du menu responsive pour mobile je souhaite faire un menu qui pousse le contenu du site pour s'afficher en sidebar. Je galère là dessus depuis plusieurs jours, votre aide serait précieuse.

Une classe .with--sidebar apparait sur le body quand on clique sur le hamburger grâce à un .site-pusher qui pousse le contenu avec un translateX. Mais le header, qui est normalement en position fixed, remonte tout en haut du site à ce moment là.

Je voudrais que le header reste fixé au niveau du scroll après l'on ai cliqué sur .toggle afin que lorsque l'on quitte le menu on puisse poursuivre la navigation du contenu où on l'a laissée.

Sans doute qu'il y a des incohérences dans le css même si j'essaie de faire ça proprement. Je suis à l'écoute de tous vos commentaires. Voilà un bout du code.

@media(max-width:750px){
	#primary-menu{
		top:57px;
		left:0;
		width:100%;
		z-index:2;
		background-color:white;
		transform:translatex(-80%);
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
	}
	.toggle-on .main-navigation a{
		background-color:white;	
		text-align:center;
		color:black;		
		font-size:18px;
		letter-spacing:1px;
	}
	.menu-toggle{
		position:absolute;
		float:left;
		top:10px;
		left:10px;
		z-index:1;
	}
	.with--sidebar{
		overflow:hiden;
	}
	.with--sidebar .main-header-container{
		background-color:white;
		padding-bottom:5px;
	}
	.with--sidebar .main-header-container.scrollUp{				
		transform:translatey(0);
	}
	.with--sidebar .site-pusher {
    transform: translateX(80%);
		transition-duration:0.5s;
  }
	.toggle-on{
		position:fixed;
		top:0;
		left:0;
	}
	.toggle-on nav.ast-flex-grow-1{		
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
}