Mobile navigation covers up site title (7.0)

Site URL: http://manekinwinecompany.com

I have a 7.0 site (Aviator template) and I have not been able to figure out how to adjust the mobile nav bar so that it does not cover the entire screen when clicking on the double line nav symbol. I want to retain the site title's position and visibility while clicking on the nav bar. Wondering if it is as simple as changing the template, or if there is custom CSS required? Incidentally, I built another site on 7.1 and it automatically allows for the site title to remain in its position while clicking on mobile nav.

Try adding to Home > Design > Custom CSS

body.is-mobile-overlay-active .Mobile-bar.Mobile-bar--top {
    z-index: 20000;
    position: relative;
}
body.is-mobile-overlay-active .Mobile-bar-menu {
    visibility: hidden;
}
.Mobile-overlay-menu {
    top: 100px;
}
button.Mobile-overlay-close {
    position: relative;
    z-index: 999;
    top: 80px;
}

Bingo. That worked. Thank you so much.

Not sure if this is within scope of the forum, but are you able to explain each part of that so I can better understand the CSS?