Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active April 25, 2018 09:11
Show Gist options
  • Save srikat/9224884 to your computer and use it in GitHub Desktop.
Save srikat/9224884 to your computer and use it in GitHub Desktop.
Shrinking header in Genesis similar to that in Centric Pro. http://sridharkatakam.com/shrinking-fixed-header-genesis-similar-centric-pro/
//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );
function custom_load_scripts() {
wp_enqueue_script( 'shrinking-header', get_bloginfo( 'stylesheet_directory' ) . '/js/shrinking-header.js', array( 'jquery' ), '1.0.0', true );
}
jQuery(function( $ ){
$(".site-header").after('<div class="bumper"></div>');
$(window).scroll(function () {
if ($(document).scrollTop() > 50 ) {
$('.site-header').addClass('shrink');
} else {
$('.site-header').removeClass('shrink');
}
});
});
/* Shrinking Header
--------------------------------------------- */
.site-header {
position: fixed;
width: 100%;
z-index: 999;
}
.title-area {
padding-top: 16px;
padding-bottom: 0;
}
.site-header .wrap,
.bumper {
min-height: 164px;
}
.site-header,
.site-header .wrap,
.site-description {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
/* Shrink
--------------------------------------------- */
.site-header.shrink {
border-bottom: 1px solid #ddd;
}
.shrink .wrap {
background-color: rgba(255, 255, 255, 0.1);
min-height: 80px;
padding: 0;
}
.shrink .site-title {
font-size: 20px;
padding-top: 3px;
}
.header-image .shrink .site-title {
padding: 0;
}
.header-image .shrink .site-title > a {
min-height: 60px;
}
.shrink .site-title a {
background-size: 270px 60px !important;
}
.site-header.shrink .widget-area {
padding-top: 0;
}
@media only screen and (max-width: 1139px) {
.title-area {
width: 320px;
}
}
@media only screen and (max-width: 1023px) {
.title-area {
width: 100%;
}
.site-header .wrap, .bumper {
min-height: 172px;
}
.site-header.shrink .wrap {
min-height: 60px;
}
}
@media only screen and (max-width: 768px) {
.shrink .site-title {
font-size: 24px;
}
}
@media only screen and (max-width: 600px) {
.site-header {
top: 0;
}
.site-header .wrap, .bumper {
min-height: 130px;
}
}
@media only screen and (max-width: 320px) {
.site-header .wrap, .bumper {
min-height: 190px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment