Desktop & Mobile Burger

Site URL: https://www.thefourleafcloverproject.com/

Hi CSS Friends!

I've customized a client desktop website, so the menu displays with a custom burger icon. The desktop display looks wonderful, but the mobile display not so much. On the mobile, the custom burger icon is larger than I'd like for it to be and feels off center with the logo centered. Is there a way I can either 1.) reduce the burger size in mobile or 2.) Left Align the currently centered Logo?

Thanks so much.

@MissTippyTap Hi! You can add this code under Website > Pages > Website Tools > Custom CSS, to left align the header logo and reduce the size of the custom burger image. 

@media screen and (max-width: 767px) {
    #header .header-title a {
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
    }

    #header .burger-inner:after {
        background-size: 70px;
        width: 70px; 
        height: 40px;
    }

    #header .burger-box {
        width: 70px;
        height: 40px;
    }

    #header .header-burger {
        width: 70px;
        flex: 0 0 70px;
        justify-content: center;
    }

    #header .header-title-nav-wrapper {
        flex: 1 0 calc(100% - 70px);
    }
}