Here’s my approach in case you want to consider an alternative for the next release:
@media only screen and (max-width: 767px) {
#logo a:first-child{
padding-top: 20px !important;
}
#logo img {
max-height: 52px !important; /* adjust accordingly */
}
}
@media only screen and (max-width: 991px) {
#logo a:first-child{
width: 100%;
}
#logo img {
margin-left: auto;
margin-right: auto;
width: auto !important;
}
#logo a.mobile-menu-show {
position: fixed;
top: 5px;
right: 5px;
}
}
Please let me know if you see any flaws. Thanks!