Remove Shrinking Header in Genesis Centric Pro

Twitter0
Facebook0
Google+2
LinkedIn0

This is a hack but it worked for me. Just replace the code below with the code in /js/global.js. The only difference is that I remove the “shrink” class in line 7.

Editing the code below will remove the shrinking header on the Centric Pro theme.

jQuery(function( $ ){

        $(".site-header").after('<div class="bumper"></div>');

        $(window).scroll(function () {
          if ($(document).scrollTop() > 1 ) {
            $('.site-header').removeClass('shrink');
          } else {
            $('.site-header').removeClass('shrink');
          }
        });
    
    $("header .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>');
    
    $("#responsive-menu-icon").click(function(){
        $("header .genesis-nav-menu").slideToggle();
    });
    
    $(window).resize(function(){
        if(window.innerWidth > 600) {
                $("header .genesis-nav-menu").removeAttr("style");
        }
    });
        
});

Then, it’s just simple css:

/* On Line 1049 Change: */
.site-header .wrap {
        min-height: 30px;
}

/* On Line 1053 Change: */
.bumper {
        min-height: 30px;
}

/* On Line 1057 Change: */
.site-header .wrap {
        padding: 10px;
        max-width: 100%;
}

/* On Line 1083 Change: */
.site-title {
        font-family: 'Spinnaker', sans-serif;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
}

/* On Line 2242, Find and DELETE: */
.site-header .wrap {
        padding: 20px 5% 0;
}
        
.site-header.shrink .wrap {
        padding: 0px 5%;
}

/* On Line 2330, Find and DELETE: */
.site-header .wrap {
        min-height: 100px;
        }
.site-header .site-title {
        font-size: 40px;
        }
.shrink .site-title {
        font-size: 24px;
        }

I tried this and it works as well. It just removes the shrinking action completely.

jQuery(function( $ ){
    
    $("header .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>');
    
    $("#responsive-menu-icon").click(function(){
        $("header .genesis-nav-menu").slideToggle();
    });
    
    $(window).resize(function(){
        if(window.innerWidth > 600) {
                $("header .genesis-nav-menu").removeAttr("style");
        }
    });
        
});

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>