Inline Responsive Menu in Genesis

inline-responsive-menu-genesis.css

/* Add the following at the end in Genesis Sample’s style.css 
Source: https://sridharkatakam.com/add-inline-mobile-responsive-menu-genesis-sample/
*/

.nav-primary {
    border-top: none;
    float: right;
}

@media only screen and (max-width: 1023px) {

    .site-header .wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .title-area {
        width: auto;
    }

    .header-image .title-area {
        float: left;
        width: 100%;
    }

    .menu-toggle {
        width: auto;
        border-top: none;
        float: right;
        margin-top: 16px;
    }

    .menu-toggle,
    .menu-toggle:focus,
    .menu-toggle:hover {
        border-top: none;
    }

    .nav-primary {
        float: none;
        clear: both;
    }

}

@media only screen and (max-width: 860px) {

    .site-header .wrap {
        padding-left: 5%;
        padding-right: 5%;
    }

}

@media only screen and (max-width: 440px) {

.site-header .title-area {text-align: inherit;}
.site-title { font-size: 1.7rem;}
.nav-primary { padding-top: 5px; padding-bottom: 0;}
.menu-toggle {margin-right: auto; margin-top: 10px; float: none;}

}