How to make a hamburger mobile menu first indented and then fixed?

Question

css

Hello, the site has a mobile menu, its stripes are fixed in the upper right corner. I added a 30 px block on top, in the desktop, when scrolling the menu, it hides it and everything is ok. And in mobile form, menu bars run into it. How to make the bars move along with the #header strip?

#header is fixed by such a script

$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 30) $("#header").css({top: '0', position: 'relative'});
else $("#header").css({top: '0', position: 'fixed'});
});
});

but .navPanelToggle is not smart enough to apply

Answer 1

SELECTOR {
     display: flex;
     align-items: center;
     justify-content: center;
}

Answer 2

For example Container do

display: flex;
flex-direction: column;
align-items: center;

put the text in an inner wrapper, for example in another div