Removing Shrinking Header in Genesis Centric Pro

[elioverbey]

What if you wanted to remove the javascript action on the Centric pro theme that had the header go from large to small? Meaning – there would be no action – the header would just be small the entire time (and fixed)?

The action is nice, but for the project I am working on - it doesn't fit.

Thanks for your thoughts!

---

Let me help you customize your theme, or help your with SEO. Current Sr. SEO Analyst at Worldwide NonProfit
Visit me here: elioverbey.net | Connect on Twitter

http://elioverbey.net

[MauMedia]

Hi, I would also like to remove this function. Can anybody help?

Thank you in advance!

[tomatillodesign]

I also need to remove this action. Nice for some sites but too distracting for my project. Thanks for any help.

[elkiehound]

Elioverbay,

Looks like your site if fixed now, the header does not change sizes. How did you fix it ?

Thanks for sharing

[elioverbey]

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.

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 hope that works for you. You can edit the css for your needs!

---

Let me help you customize your theme, or help your with SEO. Current Sr. SEO Analyst at Worldwide NonProfit
Visit me here: elioverbey.net | Connect on Twitter

[elioverbey]

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");
    	}
    });
	
});

The CSS above will work, but I haven't fixed it when you add a custom menu in the header right. I am sure you will have to adjust your padding and margin there.

---

Let me help you customize your theme, or help your with SEO. Current Sr. SEO Analyst at Worldwide NonProfit
Visit me here: elioverbey.net | Connect on Twitter

[tomatillodesign]

Sorry a bit of a newbie here. Where do you add the jQuery code? Thanks for your help.

[tomatillodesign]

Nevermind - I see it above.

[danielshaw]

How would you remove the entire centric header completely?

[Author]

Posts