Update on February 11, 2016: Click here for a newer tutorial on this topic.
One of the unique features of the just released Centric Pro, a Genesis child theme from StudioPress is the header (text logo size) that shrinks in size as the page is scrolled down and always remains visible.
In this article I share how the shrinking and fixed header code from Centric Pro can be used in Genesis Sample child theme that has site title text with tagline at the left and a custom menu in Header Right widget area at the right.
Note: The CSS code provided below is NOT a generic one that can be used as is in any Genesis child theme. You will need to adjust the values, especially the various instances of min-height depending on what you have appearing in the left side - just site title or title + tagline. This article only deals with the cases when you have text logo in the header and not an image logo.
Create a file named say, shrinking-header.js having the following code and upload it to child theme directory/js (create js directory if not existing):
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
