Is There A Way To Make This CSS Mobile Friendly?

You can add this code to Website Tools (under Not Linked) > Code Injection > Footer (DO NOT add to Custom CSS)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.header-menu-nav-folder[data-folder="/surface-design"]').appendTo('[data-folder="root"]>div>div>.container.header-menu-nav-item:nth-child(2)');
		$('a[data-folder-id="/surface-design"]').click(function() {
  $(this).toggleClass('tp-burger-folder');
});
});
</script>
<style>
  .header-menu-nav-folder[data-folder="/surface-design"] {
    display: block !important;
    position: relative !important;
    transform: unset !important;
    overflow: hidden;
    height: auto !important;
    transition: all 0.3s;
}
.header-menu-nav-folder[data-folder="/surface-design"] .header-menu-controls {
    display: none;
}
a.tp-burger-folder+.header-menu-nav-folder[data-folder="/surface-design"] {
    height: 100% !important;
}
.header-menu-nav-folder[data-folder="root"] {
    transform: unset !important;
    overflow: hidden;
}
[data-folder="/surface-design"] a {
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
}
[data-folder-id] {
    margin-top: 10px;
    margin-bottom: 10px !important;
}
  a[data-folder-id] span:nth-child(2):after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
}

a[data-folder-id] {
    white-space: nowrap;
}
</style>