How to move menu to left side of header on mobile

Question

I need to change the "hamburger" menu from the right side of the page to the left side. This is a live website link. This webpage is build with the theme "Bulk". The icon has this styling:

.open-panel {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 25px;
        left: 22px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        z-index: 2;
    }
    .shrink .open-panel {
        top: 14px;
    }
    .open-panel span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #000;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    .open-panel span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel span:nth-child(2) {
        top: 9px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel span:nth-child(3) {
        top: 18px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -2px;
        left: 3px;
    }
    .open-panel.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }
    .open-panel.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 21px;
        left: 3px;
    }

And the logo on the left side has this styling:

.site-branding-logo {
    float: left;
}
.site-branding-logo a {
    border: none;
    z-index: 9999;
    position: absolute;
}
.site-branding-logo img {
    max-height: 70px;
    width: auto;
    padding-right: 10px;
}

What lines do I need to change to get the menu on the left side and the icon on the right side?

Answer 1

To implement that, you have to do two things.

First, you need to update the hamburger style .open-panel class to be aligned on left (Currently, it's absolute position from the style so you can put it on left side using left attribute.)

Second, you need to update the logo icon link style .site-branding-logo a class to be aligned on right using right css attribute.

The following codes are the changes to implement them.

.open-panel {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 25px;
    left: 22px;  /* Replace `right` attribute to `left` attribute. */
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 2;
}

.site-branding-logo a {
    border: none;
    z-index: 9999;
    position: absolute;
    right: 0;
}

Answer 2

Change .site-branding-logo css to have float: right; and remove right: 22px from @media (max-width: 767px) .open-panel.

If you don't want the logo to be on the left for other screen widths, you'll have to make sure there's a media query that only makes this applicable to the mobile screen size.