Adding an image to Mobile Menu Overlay

#1. Add a non-clickable image to the mobile menu overlay

You can use this code to Custom CSS box. Replace Pixabay with your desired image url

[data-folder="root"] .header-menu-nav-wrapper:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2018/07/10/21/53/tournament-3529744_1280.jpg);
    display: block;
    width: 200px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    position: relative;
}

Result:

#2. Add a clickable image to the mobile menu overlay

Use this code to Code Injection Footer

<script src="https://assets.squarewebsites.org/lazy-summaries/lazy-summaries.min.js"></script>
<script>
$(document).ready(function(){
    $('<a class="custom-img" href="https://squarespace.com"><img src="https://cdn.pixabay.com/photo/2018/07/10/21/53/tournament-3529744_1280.jpg"/>').insertBefore('.header-menu-nav-wrapper');
});
</script>
<style>
a.custom-img img {
    width: 250px;
    padding-left: 6vw;
    margin-left: 4vw;
}
</style>

Result: