Mobile logo and Menu on the same horizontal line

Anyone know how I can get my menu (hamburger icon) to no longer be above my logo, but instead have the logo on the left and the menu icon on the right (on the white background?

(this is only for mobile, it's fine on desktop). 

thx!

@thatsmithcray Hey, have you tried selecting the hamburger menu in the CSS style editor? I imagine there would be some options in there which allow you to align it left or right of the page.

@Thurstings unfortunately the Flatiron template im using doesnt have any options for the mobile menu design...

@thatsmithcray Do you mind sending me your login details I can take a look? Can't gurantee I will have a fix for it but I can definitely take a look for you. 

Sorry, not going to send you my login details but if anyone has custom code for this please let me know. 

@thatsmithcray No worries I understand! 

Try this for aligning the mobile menu to the right:

@media only screen and (max-width: 640px) {
#mobile-navigation #mobile-navigation-label:after {

vertical-align: right !important;

}}

I am still learning the ropes of code so sorry if this doesn't work / achieve your desired effect. 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
header#topBar {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}
}

@tuanphan that almost worked....only issue is the menu wont expand anymore when clicked on. Any thoughts?