Sridhar Katakam

Genesis and WordPress Tutorials

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

by 3 Comments

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.

  • Thanks Sri, This is very useful.

    I had to add the css below to center button for phones.
    .before-header a.button {
    margin-left:0;
    }

    I changed the CSS so this would only show on phones and not Ipads. My final results came as so.

    .before-header a.button {
    margin-left:0;
    }
    .before-header {
    padding: 14px 0;
    display: none;
    }

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

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

    .strong {
    font-weight: 700;
    }

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

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

    .before-header a.button {
    margin-left:0;
    }

    .before-header {
    display: block;
    background: #24479B;
    }

    }

    Reply

  • I am trying to do this but it’s not showing the buttons just text inside of box above header.

    Where should I be placing the code that goes in the functions.php folder

    Reply
    • >