Sridhar Katakam

Genesis and WordPress Tutorials

Utility Bar in Centric Pro

by 3 Comments

In the members-only forum, a user asked:

Hi Sridhar, you have several great tutorials for utility bars and I tried several of them on a new site I am building using centric pro but with no success.

Anyway you can modify them to work with Centric Pro?

thanks

Like in the tutorial for Altitude Pro we shall wrap utility bar and site header in a custom div and adjust Centric Pro's style.css to make utility bar + header fixed.

Screenshots:

centric-pro-utility-bar

upon scrolling down:

centric-pro-utility-bar-scrolled

Screencast:

Step 1

Add the following in Centric Pro's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • This is just what I’m looking for!

    A couple months ago, you helped me shrink the default header height on my Centric themed site (wp.redfynn.com).

    Would you be able to customize this Utility Bar for me so that the header stays the same as it is now, but the Utility Bar disappears when a user scrolls down?

    I tried following this tutorial but leaving previous changes as they were, like:

    .site-header .wrap {
    min-height: 65px;
    }

    .bumper {
    min-height: 65px;
    }

    …

    .header-image .shrink .site-title > a {
    min-height: 25px;
    }

    .shrink .site-title a {
    background-size: 113px 24px !important;
    }

    Thanks!

    Reply
    • >