How to add a “Call Us” button above header on mobiles in Genesis

This tutorial provides the steps to register a before-header widget area and display a widget placed in it above the header on mobile widths (812px and below) in Genesis.

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.

Step 1

Add the following in child theme’s functions.php:

// Register before-header widget area.
genesis_register_widget_area(
    array(
        'id'          => 'before-header',
        'name'        => __( 'Before Header', 'my-theme-text-domain' ),
        'description' => __( 'Appears above site header.', 'my-theme-text-domain' ),
    )
);

add_action( 'genesis_before_header', 'custom_above_header' );
/**
 * Display before-header widget area above site header.
 */
function custom_above_header() {
    genesis_widget_area( 'before-header', array(
        'before'    => '<div class="before-header widget-area"><div class="wrap">',
        'after'     => '</div></div>',
    ) );
}

Step 2

Add the following in child theme’s style.css:

.before-header {
    padding: 14px 0;
    display: none;
}

.before-header .wrap {
    text-align: center;
}

.before-header a.button {
    border-radius: 40px;
    padding: 10px 44px;
    margin-left: 30px;
}

.strong {
    font-weight: bold;
}

@media only screen and (max-width: 812px) {

    .before-header {
        display: block;
    }

}

@media only screen and (max-width: 546px) {

    .before-header a.button {
        margin-top: 12px;
    }

}

Step 3

At Appearance > Widgets drag a Custom HTML widget into “Before Header” widget area and add in your Call to action HTML.

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.