How to get header to not double up on tablet in Music Free

1. I want to keep the header (or maybe this is just the black section of the overall header) from doubling up, with the main menu dropping down, when in tablet mode. It kind of makes sense on something like the demo site, with a wide main menu and the account menu, because when you narrow down to tablet width, those two menus are about to collide anyway.

I won't have that account menu, and if I need to consolidate the main menu to avoid this I'll do it. I'm kind of blundering into the template file structure, and I can't see where this behavior in the tablet mode is defined. For sake of illustration, I've pared down the main menu on an otherwise unedited version of the demo site so there should be plenty of room for those two menus to coexist.

2. In my dreams, I'd love to have the main menu bar narrow along with the window and just reduce to the three-line icon when it's about to overflow, independent of what's happening with the content columns. I'm seeing some tricky ways to detect when a box like this is overflowing, but is there a typical way to do this in this sort of template? I'll hack the code if I absolutely have to, but of course some override css would be great.

Thanks,
Drew

About doubling effect:
Please edit file:
/templates/gk_music_free/css/menu.css,
find line number 181:

Code: Select all

@media screen and (max-width: 800px), screen and (max-device-width: 800px), only screen and (max-device-width: 1600px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: 1600px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: 1600px) and (min-device-pixel-ratio: 2) {
    #gkMainMenu {
      clear: left;
      margin-top: -5px!important;
   }
}


and comment it out completly.

Perfect. Thanks.