Hello,
As Ismael suggests, I placed the following css in my custom.css file, which brings the menu under a now centered logo, and which seems to solve the issue. You may need to tweak things for your specific logo / menu widths.
Best, thk
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {</p>
<p>.responsive .thumbnails_container .slideThumb{ margin-right:19px;}
.responsive .side-container-inner .minor-meta { text-align: center; }</p>
<p>/*thumbnail slideshow*/
.responsive .thumbnails_container .slideThumb{ margin-right:13px;}</p>
<p>/*dynamic*/
.responsive #top .callout{font-size: 30px;}
.responsive #top.yanone_kaffeesatz .callout{font-size: 40px;}</p>
<p>/*header*/
.responsive .main_menu{background: none; box-shadow:none;}
.responsive .main_menu,
.responsive .logo{ text-align: center; position: relative; top:auto; margin:0 auto; display:block; float:none; left:auto; right:auto; height:auto; padding:15px 0; clear:both; width:100%;}
.responsive .main_menu div,
.responsive .logo a, .responsive .logo img{display:inline-block; float:none;}
.responsive .header_meta{position: relative; margin:0; top:0;}
.responsive .header_meta #searchform {display:none;}
.responsive .header_meta .small_header_info{position: relative; text-align: center; bottom: auto; margin:0 auto; float:none;}
.responsive #top .social_bookmarks{position: relative; top: auto; clear: both; margin: 0; width:100%; overflow: hidden; text-align: center; height:40px;}
.responsive #top .social_bookmarks li, .responsive #top .social_bookmarks li a{display:inline-block; float:none;}
}