Меню со сдвигом контента

<!--Меню на Zero-блоке-->
<!--https://mt-webdesign.ru/menu-overlay-->
<!--Настройки меню-->
<style>
:root {
--BurgerColor: #fff; /*цвет полосок на иконке меню*/
--BurgerColorActive: #fff; /*цвет полосок на иконке меню при клике*/
--MenuSizeTransform: 550px; /* выезд меню, ставим положительное значение */
--MenuSize: -550px; /* выезд меню, ставим отрицательное значение */
--OverlayBackground: #121212; /* цвет фона */
--MenuPosition: fixed; /* позиционирование меню: absolute - без фиксации, при скролле. fixed - с фиксацией */
/*выезд на телефоне*/
--MenuSizeTransform480: 550px; /* выезд меню, ставим положительное значение */
}
</style>
<div class="NavWrap">
<div class="NavIcon">
<span></span>
<span></span>
</div></div>
<div class="Overlay"></div>
<style>
.NavWrap {
width: 100%;
height: 100%;
}
.Overlay {
width: 100%;
height: 100vh;
background: transparent;
cursor: pointer;
opacity: 0;
transition-duration: 500ms;
/*backdrop-filter: blur(10px);*/
}
.overlay-open {
background: black;
/*backdrop-filter: blur(5px);*/
opacity: 0;
transition-duration: 500ms;
}
.NavIcon {
display: flex;
justify-content: center;
overflow: hidden;
width: 60px;
height: 27px;
transform: translate(0px, -50%);
top: 50%;
position: absolute;
cursor: pointer;
}
.NavIcon span {
display: block;
position: absolute;
height: 2px;
width: 60%;
background: var(--BurgerColor);
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
overflow:hidden;
/*mix-blend-mode: difference;*/
}
.NavIcon.open span {
background: var(--BurgerColorActive);
}
.NavIcon span:nth-child(1) {
top: 15px;
}
.NavIcon span:nth-child(2) {
top: 8px;
}
.NavIcon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 13px;
}
.NavIcon.open span:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 13px;
}
.NavIcon.open {
left: 0px;
}
.uc-menu-block {
position: var(--MenuPosition); 
top: 0px;
z-index: -1;
width: 100%;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, var(--MenuSize));
}
.menu-open {
transition-delay: 0s;
z-index: 99;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, 0px);
overflow-y: auto;
}
.menu-open .t396__artboard {
position: absolute;
}
.wrapper-menu {
position: relative;
top: 0;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
}
.body-open {
transition-delay: 0s;
width: 100%;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
top: var(--MenuSizeTransform);
transform: scale(0.95) !important;
overflow: hidden;
}
.t-body {
background: var(--OverlayBackground);
}
.overflow {
background: var(--OverlayBackground);
overflow: hidden !important;
}
.inside {
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
opacity:0;
transition-duration: 0.3s;
transition-delay: 0.3s;
}
.inside-show {
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
opacity:1;
transition-delay: 0.6s;
}
@media screen and (max-width: 480px) {
.uc-menu-block {
position: var(--MenuPosition); 
top: 0px;
z-index: -1;
width: 100%;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform: translate(0%, -120vh);
}
.menu-open {
transition-delay: 0s;
z-index: 99;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, 0px);
} 
.wrapper-menu {
position: relative;
top: 0;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
}
.body-open {
top: 100vh;
transition-delay: 0s;
width: 100%;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
overflow: hidden;
transform: scale(0.95) !important;
}
}
@media screen and (max-width: 640px) {
.uc-menu-block .t396__artboard {
transform: translateY(0) !important;
}
.menu-open {
transform: translate(0%, 0vh);
}
.body-open {
top: var(--MenuSizeTransform480) !important;
}
}
a {
text-decoration: none;
}
</style>
<script>
$(".rolling-text").addClass('inside');
$(".uc-menu-block").appendTo('.t-body');
$(".NavWrap").appendTo('.icon .tn-atom');
$(".Overlay").appendTo('.uc-menu-block');
$(".uc-fix").appendTo('.t-body');
$('.NavWrap').click(function(){
$('.uc-menu-block').toggleClass('menu-open');
$('.uc-fix').toggleClass('fix-menu-open');
$('.NavIcon').toggleClass('open');
$('.wrapper-menu').toggleClass('body-open');
$('.t-body').toggleClass('overflow');
$('.Overlay').toggleClass('overlay-open');
});
$('a').click(function(){
$('.uc-menu-block').removeClass('menu-open');
$('.uc-fix').removeClass('fix-menu-open');
$('.NavIcon').removeClass('open');
$('.wrapper-menu').removeClass('body-open');
$('.t-body').removeClass('overflow');
$('.inside').removeClass('inside-show');
$('.Overlay').removeClass('overlay-open');
}); 
$('.Overlay').click(function(){
$('.uc-menu-block').removeClass('menu-open');
$('.uc-fix').removeClass('fix-menu-open');
$('.NavIcon').removeClass('open');
$('.wrapper-menu').removeClass('body-open');
$('.t-body').removeClass('overflow');
$('.inside').removeClass('inside-show');
$('.Overlay').removeClass('overlay-open');
}); 
$(".NavWrap").click(
function() {$('.inside').toggleClass('inside-show'), 5000;
});
$('.t-records').wrapAll('<div class="wrapper-menu">');
</script>