The menu items overlap with social icons and copyright text on small screen. How to fix that?

Please go to "Style Customizer > Others > Custom CSS" and try using this CSS:

@media only screen and (max-width: 1200px) {
    
    #side-container {
        padding: 20px 50px
    }
    
    #logo-wrapper {
        margin-bottom: 20px;
    }
    
    #menu-wrapper > ul > li {
        font-size: 12px
    }
    
    #side-footer-wrapper {
        bottom: 20px;
    }
    
    #copyright {
        margin-bottom: 10px;
    }
    
}

This code will reduce the overall spacing of the side panel for the resolution lower than 1200px (set by media query as you can see). But if you have so many menu items, the issue might still occur. If this is the case, I would recommend to either reduce the number of menu items or set the "font-size" value in the code above to be lesser.

In case you would like to use custom CSS for other elements, I would recommend "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.