Twenty Fourteen: Unsticky header after making header bigger

Question

I am using theme Twenty Fourteen, and to add a logo I made the header bigger with the following code:

 .header-main {
    min-height: 108px;
} 

It works, but now the header isn't sticky anymore and I don't know why. Can someone please explain why the header isn't working?

Answer 1

This is due to the theme's js.

in /twentyfourteen/js/functions.php:

    /*
     * Fixed header for large screen.
     * If the header becomes more than 48px tall, unfix the header.
     *
     * The callback on the scroll event is only added if there is a header
     * image and we are not on mobile.
     */
    if ( _window.width() > 781 ) {
        var mastheadHeight = $( '#masthead' ).height(),
            toolbarOffset, mastheadOffset;

        if ( mastheadHeight > 48 ) {
            body.removeClass( 'masthead-fixed' );
        }

        if ( body.is( '.header-image' ) ) {
            toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
            mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;

            _window.on( 'scroll.twentyfourteen', function() {
                if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
                    body.addClass( 'masthead-fixed' );
                } else {
                    body.removeClass( 'masthead-fixed' );
                }
            } );
        }
    }

You can see it checks the height, and then if it's larger than 48, removes the masthead-fixed class from the body.

You could either

a. run some js that fires after functions.js:

$(body).addClass( 'masthead-fixed' );

b. force the site-header to be fixed via CSS:

.site-header
{
    postion: fixed;
}

Note in both cases, you'll likely need to add larger top margins to other content to push it down so the header doesn't cover it.