打开菜单时，内容下移

$(document).ready(function () {
    var menuIcon = $('.menuIcon');
    menuIcon.on('click', function (e) {
        e.preventDefault;
        $(this).toggleClass('menuIconActive');
    });
    menuIcon.on('click', function () {
        if ($('#menu').hasClass('menuOpen')) {
            $('#menu').fadeOut(500);
        } else {
            $('#menu').fadeIn(500);
        }
        $('#menu').toggleClass('menuOpen');
    });
});

header {
   width: 100%;
   /* height: 70px;*/
   background: var(--dark);
}

.menu {
   display: none;
}


.menuItems {
   /*position: fixed;*/
   display: block;
   top: 0;
   right: 0;
   left: 0;
   /*margin-top: 70px;*/
   background: rgba(1, 0, 1, .25);
   z-index: 10;
   overflow: auto;

}

.menuItem {
   display: block;
   padding: 10px 0;
   text-align: center;
   color: var(--light);
   font-size: 18px;
   transition: all 1s;
   transition-delay: .0s;
   margin: 4px;
   z-index: 11;
}

.menuItem:hover::after,
.menuItem:hover::before {
   position: relative;
   font-size: 22px;
   color: var(--green);
   opacity: .7;
   transition: all 1s;
   transition-delay: .5s;
}

.menuIcon {
   position: relative;
   width: 50px;
   height: 50px;
   cursor: pointer;
}

.menuIcon a {
   display: block;
}

.menuIcon span,
.menuIcon span::before,
.menuIcon span::after {
   position: absolute;
   top: 69%;
   margin-top: -1px;
   left: 50%;
   margin-left: -10px;
   width: 20px;
   height: 2px;
   background-color: #000;
}

.menuIcon span::before,
.menuIcon span::after {
   content: '';
   display: block;
   transition: .3s;
}

.menuIcon span::before {
   transform: translateY(-7px);
}

.menuIcon span::after {
   transform: translateY(7px);
}

.menuIconActive span {
   height: 0;
}

.menuIconActive span::before {
   transform: rotate(45deg);
}

.menuIconActive span::after {
   transform: rotate(-45deg);
}

.logo {
   position: relative;
   bottom: 37px;
   left: 70px;
}

.logo span {
   color: var(--green);
   font-size: 30px;
   font-weight: 900;
}

.about {
   height: 800px;
   position: relative;
   padding: 40px 10px;
}

.about:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/background.png);
  z-index: -1;
  filter: blur(10px);
}

.wwc {
   display: flex;
   justify-content: center;
}

.wwcTable {
   padding: 20px 20px;
   border: 1px solid var(--light);
   color: var(--light);
   font-size: 22px;
   line-height: 45px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
      <div class="menuIcon">
         <a href="#">
            <span></span>
         </a>
      </div>
      <div class="logo">
         <span>Tesmi</span>
      </div>
      <div class="menu" id="menu">
         <div class="menuItems">
            <a href="#" class="menuItem">Главная</a>
            <a href="#" class="menuItem">О нас</a>
            <a href="#" class="menuItem">Контакты</a>
         </div>
      </div>
   </header>
   <main>
      <div class="about">
         <div class="wwc">
            <div class="wwcTable">
               <ul>
                  <li>Разработка веб-сайтов</li>
                  <li>Дизайн логотипов</li>
                  <li>Разработка продающих текстов</li>
                  <li>Дизайн полиграфии</li>
               </ul>
            </div>
         </div>
      </div>
   </main>