Twenty Fourteen: Unstickiger Header, nachdem der Header größer geworden ist

Ich verwende das Thema Twenty Fourteen, und um ein Logo hinzuzufügen, habe ich den Header mit dem folgenden Code vergrößert:

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

Es funktioniert, aber jetzt ist der Header nicht mehr klebrig und ich weiß nicht warum. Kann jemand bitte erklären, warum der Header nicht funktioniert?

Solutions Collecting From Web of "Twenty Fourteen: Unstickiger Header, nachdem der Header größer geworden ist"

Dies liegt an der js des Themas.

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' ); } } ); } } 

Sie können sehen, dass die Höhe überprüft wird. Wenn sie größer als 48 ist, wird die vom masthead-fixed class aus dem Textbereich entfernt.

Du könntest entweder

ein. Führen Sie einige js aus, die nach functions.js ausgetriggers werden:

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

b. Erzwinge das Fixieren des Site-Headers über CSS:

 .site-header { postion: fixed; } 

Hinweis: In beiden Fällen müssen Sie wahrscheinlich anderen Seiten einen größeren oberen Rand hinzufügen, um ihn nach unten zu schieben, damit die Kopfzeile ihn nicht bedeckt.