Add masthead to header

A masthead is usually a small toolbar, placed at the very top of the page. It can be used to place secondary functionality (like a language selector or login field) when you run out of space in the main menu.

The headerBasic pattern automatically looks for a masthead and adds it to every page when found.

So to add a masthead, all you need to do is create a chunk called masthead and put your desired code inside.

Making masthead play nice with sticky navbar

You'll need to tweak your CSS/JS a little, to make the menu stick smoothly despite not being on top anymore.

// Modify sticky behaviour to accommodate masthead  
$(function() {  
    const $menu = $("#menu.sticky");  
    const $masthead = $("#masthead");  

    $($masthead)  
        .visibility({  
            onBottomPassed: function () {  
                $menu.addClass('fixed');  
            },
            onBottomPassedReverse: function () {  
                $menu.removeClass('fixed');  
            },
            continuous: true,  
            silent: true  
        })
    ;
});

// Don't fix toolbar to top (JS will take care of this)
#masthead + #menu.sticky:not(.fixed) {
    @media only screen and (min-width: @tabletBreakpoint) {
        position: absolute;
        top: auto;
    }
}