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.
After scrolling down:
Tested in Business Pro 1.1.0.
Let's register a Before Header widget area.
In includes/widgets.php, above
// Register Front Page 1 widget area.
// 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' ), ) );
before-header widget area above site header (along with the opening tag for
div.my-header) and add the closing tag for
Add the following at the end of
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.
Hi Sridhar- I’m hoping you can help me with adding this to the top of an Infinity Pro site. Currently I simply have this: https://woodlandstarschool.org/ But it would be great to have your solution. I tried yours first but there isn’t an includes folder with this theme. Thanks. Elisa.