Sridhar Katakam

Genesis and WordPress Tutorials

How to add Before Header widget area in Business Pro

by 25 Comments

Updated on April 24, 2018

In the members-only forum, a user asked:

Hi,
I’d like to add a widget area above the header (like the one on the Cafe Pro theme) on the Business Pro theme.

Can you help me with this?

This tutorial provides the steps to register a Before Header widget area in Business Pro and display widget(s) placed in it above the site header.

Step 1

Edit includes/widgets.php.

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

Already a member? Log in below or here.

  • Hello again,
    I’ve finally had a chance to test out the before header widget. I’m having two issues.
    First, when I try to add the css to the Customize css section, then I get a message that says something’s gone wrong and I’m not able to save the new css.

    Second, I’m using a fixed site-header and want the widget to be fixed along with the header.
    Can you help?
    Do you need login info? If so, I’d prefer to send the site link and credentials privately.
    Thanks!

    Reply

      • I’m sorry, I removed it because it wasn’t working. I realized that I had an outdated version of the theme which was the problem. I assumed WP would have alerted me to the update, but it did not.

        Thank You for checking!

        Reply

  • Can this be adapted for the Sample Child Theme? Also what changes need to be made such that the sticky bar can scroll to the top of the screen and stick when the header is no longer visible? Thank you.

    Reply

  • Hello,
    I can’t find (// Register front page widget areas. ) In the functions.php. Would there be any reason why this isn’t showing up? I am also using beaver builder I’m not sure if this is an issue.

    Reply

    • Still looking for some help on this issue …

      I can’t find (// Register front page widget areas. ) In the functions.php. Would there be any reason why this isn’t showing up? I am also using beaver builder I’m not sure if this is an issue.

      Reply

  • Hello there

    I followed the instructions but unfortunately, I also have a problem when I scroll using the fixed site-header as it shows in the screenshots or in the next link http://krn.corpkrone.com.mx/

    https://drive.google.com/open?id=1B4FajCu5utT2zcLd4fJTanZxf2kPQeCh
    https://drive.google.com/open?id=1wffOD_ooYzhfKKlRSYT4BuPkdmmKN7e3
    https://drive.google.com/open?id=1GGxxavHaipIJCjHWzqkKvPesLRmRbpYF

    I’m using WP 4.9.6
    Genesis Framework 2.6.1
    Business-pro 1.0.6

    do you have any advice?
    Thanks for your attention.

    Reply

  • Hi Sridhar,

    I have the before header widget area in place.

    I have set the widget to be transparent using the CSS below.

    .utility-bar {
    background-color: transparent;
    }

    This way it mimics the transparent sticky header.

    When you scroll down the page I want the Utility Bar to change to a solid colour, when the sticky header does, but I can’t figure out what elements to target with the CSS.

    The sticky header uses the CSS below to change the background colour on scrolling down.

    .has-fixed-header .site-header.shrink {
    background-color: #232c39;
    box-shadow: 0 0 2rem rgba(35, 44, 57, 0.2);
    border-bottom: 5px solid #fff100;
    }

    Thank you,

    Paul

    Reply
    • >