Sridhar Katakam

Genesis and WordPress Tutorials

Shrinking Fixed Header in Genesis similar to that in Centric Pro

by 16 Comments

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.

  • Sridhar,

    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)?

    Thanks for your thoughts!

    Reply

    • If you’re willing to edit the global.js file (just keep a backup), you can safely remove the section that introduces the shrink (lines 5-11). I’ve done it on multiple sites, and it works like a charm.

      Reply

  • Hey Sridhar,

    I read your post “How to center logo and nav in Mystile theme” and followed it ,but the logo and navigation all stay in the left side, my website link: http://www.cicilafashion.com/

    I don’t know what’s wrong with it and only you can help me in the world, PLEASE, PLEASE HELP!
    I am anxious wait for your reply!
    cicila

    Reply

  • Hi – any suggestions on how to remove the shrinking header in centric pro and add back a second menu – great theme but too limited with a single top right menu

    Thanks

    Reply

  • Your how-to’s have been a great help to me as a beginner (I am literally one week in to my first WordPress and decided to purchase Genesis with Dynamik). I plugged in the above, and it worked like a charm! However, I realized I am trying to make this applicable to the nav menu. Is there any way to make this feature of ‘resize on scroll’ applicable to the nav menu?

    Reply

  • Is there a way to do this when you have the navigation BELOW the header? For instance, if I wanted to shrink the logo and whatever’s opposite it (in this case, social icons), then have the fixed nav immediately below that. I combined this with a sticky-nav js, but the nav disappears under the header until reaching a certain scroll point. I’m trying to get the nav to stay right up against the bottom edge of the header as it shrinks.

    Reply

  • Hi,

    I have followed the steps as mentioned in the post but still the Header shrinking is not corrected in the centric pro theme.

    Is there a specific place or after a specific code that the function.php or CSS code needs to be inserted. Kindly help

    Amit

    Reply
    • >