Skip to content

Instantly share code, notes, and snippets.

@flexseth
Forked from About2git/functions.php
Last active July 15, 2019 18:32
Show Gist options
  • Save flexseth/bf610188d958ce00089a5e4dfed7cc2d to your computer and use it in GitHub Desktop.
Save flexseth/bf610188d958ce00089a5e4dfed7cc2d to your computer and use it in GitHub Desktop.
Shrinking header in Genesis similar to that in 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 );
}
<!-- Shrinking Header -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$(".site-header").addClass("shrink");
$(".custom-logo").addClass("shrink-logo");
$(".menu").addClass("shrink-line-height");
$(".menu-item").addClass("shrink-font");
} else {
}
});
});
</script>
<!-- end Shrinking Header -->
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