seothemes / genesis-starter-theme

A starter theme for the Genesis Framework with a modern development workflow
https://demo.seothemes.com/genesis-starter
145 stars 38 forks source link

Fixed Header doesn't work #10

Closed solepixel closed 6 years ago

solepixel commented 6 years ago

When adding theme support for "fixed-header", it only adds a body class "has-fixed-header" but does nothing else. There appears to be a need to add "fixed-header" to the body class when the header should be fixed. I believe there is some missing JS for this functionality.

I modified theme.js to this:

/**
 * Add shrink class to header on scroll when fixed header is enabled.
 */
$( window ).scroll( function() {
    var scroll = $( window ).scrollTop();

    if ( $('body').hasClass( 'has-fixed-header' ) ) {
        $( 'body' ).addClass( 'fixed-header' );
        var height = $( '.page-header' ).outerHeight();
        if ( $( '.front-page-1' ).length ) {
            var header = $( '.front-page-1' ).outerHeight();
        } else {
            var header = $( '.site-header' ).outerHeight();
        }

        if ( scroll >= header) {
            $( '.site-header' ).addClass( 'shrink' );
        } else {
            $( '.site-header' ).removeClass( 'shrink' );
        }
    }
} );
pathetix commented 6 years ago

I think it's because the body adds the class ".has-fixed-header". But the styling in _header.scss is not updated to that class name. It still is named '.fixed-header'

https://github.com/seothemes/genesis-starter/blob/master/assets/styles/_header.scss#L10 https://github.com/seothemes/genesis-starter/blob/master/assets/styles/_header.scss#L47

seothemes commented 6 years ago

Fixed in 44259b89fc20e0a67e3e63490f589028b6bf1478