so
1. i added this to my wordpress functions file:
//* Enqueue Scripts
add_action( ‘wp_enqueue_scripts’, ‘MY-Theme-Name_load_scripts’ );
function MY-Theme-Name_load_scripts() {

wp_enqueue_script( ‘MY-Theme-Name-responsive-menu’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/responsive-menu.js’, array( ‘jquery’ ), ‘1.0.0’ );

wp_enqueue_style( ‘dashicons’ );

}

2. I copied and pasted /js/responsive-menu.js from a different genesis theme – they all seem to use this. and uploaded it to my theme

3. i added this to my style sheet:
/* Responsive Menu
——————————————— */

.responsive-menu-icon {
cursor: pointer;
display: none;
margin-bottom: -1px;
text-align: center;
}

.responsive-menu-icon::before {
content: “\f333”;
display: inline-block;
font: normal 20px/1 ‘dashicons’;
margin: 0 auto;
padding: 10px;
color:#FFFFFF;
}

.site-header .responsive-menu-icon::before {
padding: 0;
}
.nav-primary .genesis-nav-menu.responsive-menu .sub-menu a {
color: #FFF;
}
.nav-primary .genesis-nav-menu.responsive-menu a:hover,
.nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a,
.nav-primary .genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover {
color: #e5554e;
}

and this:

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

.footer-widgets,
.nav-secondary,
.site-footer,
.site-header,
.site-inner {
padding-left: 5%;
padding-right: 5%;
}

.genesis-nav-menu > .first > a {
padding-left: 20px;
}

.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
.genesis-nav-menu.responsive-menu {
display: none;
}

.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}

.genesis-nav-menu.responsive-menu .menu-item {
margin: 0;
}

.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu a {
line-height: 1;
padding: 18px 20px;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;

}

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: “\f347”;
float: right;
font: normal 16px/1 ‘dashicons’;
height: 16px;
padding: 16px 20px;
right: 0;
text-align: right;
z-index: 9999;
color: #FFFFFF;
}

.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: “\f343”;
}

.nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
color: #fff;
}

.genesis-nav-menu.responsive-menu .sub-menu {
background-color: rgba(0, 0, 0, 0.05);
border: none;
left: auto;
opacity: 1;
position: relative;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}

.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
background-color: transparent;
margin: 0;
padding-left: 25px;
}

.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 14px 20px;
position: relative;
width: 100%;
}

.home-bottom .featured-content .entry,
.home-middle .featured-content .entry {
padding-bottom: 20px;
}

.archive-pagination li a {
margin-bottom: 4px;
}

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

.magazine-home .content .genesis_responsive_slider h2,
.magazine-home .content .genesis_responsive_slider h2 a {
font-size: 20px;
line-height: 1.2;
}

.magazine-home .content .genesis_responsive_slider .slide-excerpt-border p {
display: none;
}

}

and it seems to work on small phones
theres a certain amount of css colors to edit

also, wordpress has dashicons installed, somehow, somewhere