issue: logo stays on top of burger menu overlay

Dear people at the support forum,
I have an issue I need your help with:
A website I am creating is using a burger menu (also on big screens) and when activated, the website logo stays on top of the menu overlay instead of being covered by the overlay like the rest of the page.
Website (temporary domain):

I know this issue is created because I am using this code in the customizer:

#top div .logo {
    z-index: 101;
    position: relative;
}

This code is necessary because I am using a custom layout for the header:
menu icon left – logo middle – Instagram icon right.
When I remove the z-index: 101 rule, the logo isn’t clickable anymore in normal circumstances (burger menu overlay not activated).

So, is there a possibility to move the logo underneath the burger menu overlay, without loosing the normal functionality of the logo when the overlay is not active?

This is the CSS code I use for the header layout:

#top div .logo {
    z-index: 101;
    position: relative;}

.responsive #top #wrap_all .main_menu {
    display: flex !important;}

#top .main_menu, 
#top .avia-menu {
  width: 100%;}

#avia-menu #menu-item-search {
  position: absolute;
  right: 0;
  left: auto;}

#top #wrap_all .av-hamburger-inner {
  display:block;
  top: 0;
  margin-top: 4px;}

.html_header_top #top #wrap_all .av_logo_right #header_main .logo {
  position: relative;
  left: 50%;
  right: auto;
  margin-left: unset;
  margin-right: unset;
  transform: translateX(-50%);
  width: auto;}

.responsive #top #wrap_all  .main_menu {
  width: 100%;
  display: flex !important;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: inherit;}

#top #wrap_all .menu-item-avia-special {
  display: block ;}

.responsive #top #wrap_all #header .main_menu ul.social_bookmarks {
    display: flex;}

#top #wrap_all .main_menu ul.social_bookmarks li a {
  height: 30px;}

#top .main_menu .social_bookmarks li {
  width:40px;
  margin-left:5px;}

@media (max-width: 767px) {
	#top .main_menu .social_bookmarks li {
	margin-top: -5px;}
}

#top .main_menu .social_bookmarks li.avia-svg-icon img[is-svg-img="true"],
#top .main_menu .social_bookmarks li.avia-svg-icon svg:first-child {
  height:1.1em;
  width: auto;
  margin-top: 4px !important;}

@media and (max-width: 767px) {
  .responsive #top #wrap_all .container {
    width: 95%;
    max-width: 95%;}

  .html_header_top #top #wrap_all .av_logo_right #header_main .logo {
    max-width: 200px;
    transform: translateX(-57%);  /* depends on how many social icons are present */ }
}

#top #wrap_all .social_bookmarks li a {
width: 40px!important; 
line-height: 40px!important; 
min-height: 40px!important; 
font-size: 26px!important;}

#top #wrap_all .social_bookmarks li {
height: 40px!important; 
width: 60px!important;}

#top #wrap_all .social_bookmarks {
  height: 60px!important;}

#top #wrap_all .social_bookmarks, #top #wrap_all .social_bookmarks a, #top #wrap_all .social_bookmarks li {
	    margin-right: -16px;}

.social_bookmarks > li:hover > a {
       color: #ffffff !important;
 background: #1e251b !important;}

.social_bookmarks a:visited {
    color: #1e251b !important;
    background: #ffffff !important;}

Your help will be greatly appreciated!