Sridhar Katakam

Genesis and WordPress Tutorials

Before Header + Site Header in Business Pro

by 2 Comments

This members-only tutorial provides the steps to register a Before Header (or popularly, knows as Utility Bar) in Business Pro, combine it with the site header, make the combined div transparent initially and with a dark background upon scrolling down.

Initial state:

After scrolling down:

Tested in Business Pro 1.1.0.

Step 1

Let's register a Before Header widget area.

In includes/widgets.php, above

// Register Front Page 1 widget area.

add

// Register before header widget area.
genesis_register_sidebar( array(
    'id'          => 'before-header',
    'name'        => __( 'Before Header', 'business-pro' ),
    'description' => __( 'This is the before header widget area.', 'business-pro' ),
) );

Step 2

Let's hook before-header widget area above site header (along with the opening tag for div.my-header) and add the closing tag for div.my-header.

Add the following at the end of includes/helpers.php:

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

Already a member? Log in below or here.

  • Thanks Sridhar, I’ve implemented this; no problem, but I have one issue and a question.

    Issue: On scrolling down, before the header changes colour, my site headline moves up behind the nav menu, which looks odd. Is there a way of increasing the margin between the fixed header and the front-page-1 headline?

    My site is currently at https://stage4.krackedkreative.com/ where you can view the issue

    Question: Would it be possible for the before-header (Utility Bar) to be a different colour, on scroll, than the header?

    Thanks for the great tutorial.

    Paul

    Reply
    • >