Adding in a Hello Tool Bar to the Top of a Genesis Theme

How to add in a hello style tool bar to the head of a Genesis theme and make it appear visible after scrolling down part way down the page. Demo in Genesis Sample Theme here. This can be done with a left/right widget or just a centre one.

genesis-hello-tool-bar

 

Add in the Javascript

jQuery(function( $ ){
// Show Hello Bar after 200px
$( document ).on( 'scroll', function() {
if( $( document ).scrollTop() > 200 ) {//change value when you want it to appear
$( '.hello-bar' ).fadeIn();
} else {
$( '.hello-bar' ).fadeOut();
}
});
});
view raw hello-bar.js hosted with ❤ by GitHub

Create a file named hello-bar.js with the above, change the pixel value to adjust when the bar appears. File it in your/js folder

Left/Right Tool Bar
Enqueue the Script, Create and Position the Widgets

<?
//Don't paste in the above php tag
// Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'hello_bar_scripts_styles' );
function hello_bar_scripts_styles() {
wp_enqueue_script( 'hello-bar', esc_url( get_stylesheet_directory_uri() ) . '/js/hello-bar.js', array( 'jquery' ), '1.0.0' );
}
//Add in new Widget areas
add_action( 'widgets_init', 'hello_bar_extra_widgets' );
function hello_bar_extra_widgets() {
genesis_register_sidebar( array(
'id' => 'preheaderleft',
'name' => __( 'Pre-Header Left', 'themename' ),
'description' => __( 'This is the preheader Left area', 'themename' ),
'before_widget' => '<div class="first one-half preheaderleft">',
'after_widget' => '</div>',
) );
genesis_register_sidebar( array(
'id' => 'preheaderright',
'name' => __( 'Pre-Header Right', 'themename' ),
'description' => __( 'This is the preheader Left area', 'themename' ),
'before_widget' => '<div class="one-half preheaderright">',
'after_widget' => '</div>',
) );
}
//Position the preHeader Area
add_action('genesis_before','hello_bar_preheader_widget');
function hello_bar_preheader_widget() {
echo '<div class="preheadercontainer hello-bar "><div class="wrap">';
genesis_widget_area ('preheaderleft', array(
'before' => '<div class="preheaderleftcontainer">',
'after' => '</div>',));
genesis_widget_area ('preheaderright', array(
'before' => '<div class="preheaderrightcontainer">',
'after' => '</div>',));
echo '</div></div>';
}
view raw hello-bar.php hosted with ❤ by GitHub

Here the script is enqueued and the widgets are created and positioned, this is setting up for 2 visible widgets in the dashboard, you can also just do one only if required. Add to your functions.php

genesis-hello-tool-widgets

Center Tool Bar
Enqueue the Script, Create and Position the Widgets

<?
//Don't paste in the above php tag
// Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'hello_bar_scripts_styles' );
function hello_bar_scripts_styles() {
wp_enqueue_script( 'hello-bar', esc_url( get_stylesheet_directory_uri() ) . '/js/hello-bar.js', array( 'jquery' ), '1.0.0' );
}
//Add in new Widget areas
add_action( 'widgets_init', 'hello_bar_extra_widgets' );
function hello_bar_extra_widgets() {
genesis_register_sidebar( array(
'id' => 'preheader',
'name' => __( 'preHeader', 'themename' ),
'description' => __( 'This is the Pre-Header area', 'themename' ),
'before_widget' => '<div class="preheader clearfix">',
'after_widget' => '</div>',
) );
}
//Position the preHeader Area
add_action('genesis_before','hello_bar_preheader_widget');
function hello_bar_preheader_widget() {
echo '<div class="preheadercontainer hello-bar "><div class="wrap">';
genesis_widget_area ('preheader');
echo '</div></div>';
}

genesis-hello-tool-single

Add in the CSS

.hello-bar{
background-color: #333;
box-shadow: 0 0 5px #ddd;
display: none;
font-size: 15px;
font-weight: 700;
padding: 10px 10px;
position: fixed;
text-align: left;
width: 100%;
z-index: 9999;
color: #fff;
}
.preheaderright {
text-align: right;
}
.preheader {
text-align: center;
}
@media only screen and (max-width: 800px) {
.hello-bar{
margin-top: 0; /*may need to adjust this value for mobile menu fixed position and when it kicks in and the max-width above */
}
.preheaderright {
text-align: left;
}
}
view raw hello-bar.css hosted with ❤ by GitHub

In the media query you may need to alter the margin-top and media query width value depending on the mobile menu you are using. Add to your style.css file.

That’s it – if you want the menu fixed all the time instead of it appearing part way down, remove the javascript and set the display value to block in the CSS.

1 Comment

  1. Tyler Golberg on July 25, 2016 at 1:44 am

    This worked great! I love being able to add a simple “hello bar” without having to add another plugin.

Leave a Comment





%d bloggers like this: