Как сделать такое адаптивное меню?
Вот напильничком подпилите немного и должно устроить jsfiddle.net/dtZDZ
JS:
$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".header").addClass("active");
        $('header.masthead').addClass('scrolled')
    } else {
        //remove the background property so it comes transparent again (defined in your css)
       $(".header").removeClass("active");
        $('header.masthead').removeClass('scrolled')
    }
});
И в CSS:
header.masthead.scrolled {
 // стили, которые должны быть при скролле
}