Nav areas on mobile looks odd

thats because of your large logo dimensions

To resolve this issue, please follow the jetpack’s guideline in the Blog article on how to use Edit CSS here. http://cmspioneer.com/designwall/blog/using-jetpack-custom-css-for-your-wordpress-site/
After that, just add the following code to the Edit Css.

@media only screen and (max-width: 985px) { 
   #header .sidebar-control, #header .navigation-control {
         color: #222;
}
   #header .navigation-control  {
          background-image: none;
}
}

Regards