Custom CSS code in responsive menu

This is the prepurchase question:
Does this theme have the possibility to show the burguer menu on the left and the logo centered on the mobile version? You can see an example of what I want in https://www.honestbeauty.com/products/makeup-palette (responsive version).
Thanks.

Great, the code works fine. One thing I see is that the logo changes to the left when the sticky header appears in the desktop version. Could you keep the logo in the center by passing the menu to the left? attached image.

Great thats works!
I´ve modify a little css to increase the sticky logo size when scroll down in 320px. Can you check its ok? Thanks

.cat-design-center div.hover-mask > h3 {
font-size: 15px;
color: white;
cursor: default;
}

.single-product-content .product-tabs-wrapper {
background-color: #ffffff;
border-bottom: 1px solid #e8e8e8;
}

body .sticky-header .main-nav {
text-align: left;
}

body .sticky-header .site-logo {
position: absolute;
width: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

@media (max-width: 991px) {

.right-column .search-button {
display: none;
}

body .main-header .widgetarea-head {
display: table-cell;
font-size: 0;
}

body .main-header .site-logo {
width: 20%;
}

body .wrapp-header {
position: relative;
}

body .right-column .mobile-nav-icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

body .main-header .mobile-nav-icon {
margin-left: 0;
}

body .sticky-header .container {
height: 60px;
}

body .sticky-header .site-logo {
position: relative;
width: 15%;
left: 50%;
transform: translateX(-50%);
}
.main-header:not(.header-menu-top) .site-logo img {
max-width: 100px;
}
}
@media (max-width: 320px) {
body .sticky-header .site-logo {
position: relative;
width: 25%;
left: 50%;
}

}