Try adding this to your custom css:
@media only screen and (max-width: 768px) {
.logo-left .nav-wrap, .logo-right .nav-wrap {
float: none;
margin: 0 auto;
width: 80%;
}
#main-navigation {
float: none;
margin-bottom: 30px;
margin-left: 0!important;
}
nav ul.menu {
display: none;
}
nav .menu > li {
float: none;
display: block;
padding: 2px 0;
width: 100%;
font-size: 12px;
border-top: 1px solid #e4e4e4;
}
nav .menu > li:first-child {
border-top-width: 0;
}
nav .menu li a {
padding: 8px 0;
}
nav .menu ul li a {
padding-top: 10px;
padding-bottom: 10px;
font-weight: normal;
}
nav .menu ul, nav#top-bar-menu .menu > li > ul {
background-color: transparent!important;
position: relative;
border-left: 0;
border-right: 0;
border-bottom: 0;
left: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 1;
display: block;
top: 0;
padding-left: 20px;
}
}
– Kyle