Create a utility bar in a Genesis child theme using a widget area
.screen-reader-text,
.screen-reader-text span {
clip: rect(0, 0, 0, 0);
height: 0;
position: absolute;
width: 0;
}
.admin-bar .site-header {
top: 82px;
}
/* Utility Bar */
.utility-bar .widget {
float: right;
}
.utility-bar .widget,
.utility-bar .menu-item {
display: inline-block;
}
.utility-bar .menu-item {
font-size: 14px;
}
.utility-bar .menu-item a {
color: #000;
}
.utility-bar .menu-item a:hover {
/* color: #' */
}
.utility-bar .menu-item::after {
content: " | ";
margin: 0 10px;
}
genesis_register_sidebar( array(
'id' => 'utility-bar',
'name' => __( 'Utility Bar', krstarter' ),
'description => __( 'This is the utility bar at the top of the website.', 'krstarter' ),
) );
include( CHILD_DIR . '/lib/structure/header.php' );
//* Render the Utility Bar out to the browser
add_action( 'genesis_before_header', 'krstarter_render_utility_bar' );
function krstarter_render_utility_bar() {
genesis_widget_area(
'utility-bar',
array(
'before' => '<div class="utility-bar"><div class="wrap">',
'after' => '</div></div>',
)
);
}