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