krista-m
7/2/2018 - 6:12 PM

Utility Bar

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>',
    )
  );

}