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?
Topic theme-twenty-fourteen headers css Wordpress
Category Web
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.
Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.