Convert JavaScript to CSS media query
Just a simple case of css hierarchy and not covering my bases with undoing twitter bootstrap's .hidden class. This does the trick:

@media(min-width: 1279px) {
  section:hover {
    menu.hidden {
      display: block;
      visibility: visible;
    }
    .section-wrapper {
      border: 1px #ddd solid;
      padding: 14px;
    }
  }
}


As for performance, it was this block that was causing a much bigger slow down:

  $(window).bind('load resize orientationchange', function(){
    $('#main_menu').trigger('testfit')
    if ($(window).width() &lt; 1278) {
      $('section').find('menu').removeClass('hidden')
      $('section').find('div.section-wrapper').addClass('active')
    } else {
      $('section').find('menu').addClass('hidden')
      $('section').find('div.section-wrapper').removeClass('active')
    }
  })


Using a timeout will speed things up since it doesn't need to run everytime the browser size changes by 1 pixel: https://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery