Specials Bar Can be used as an alternative Menu bar on scroll
//Create a seperate .js file with this and place in JS folder of site
jQuery(function( $ ){
// Show Hello Bar after 200px
$( document ).on( 'scroll', function() {
if( $( document ).scrollTop() > 10 ) {//change value when you want it to appear
$( '.specials-bar' ).fadeIn();
} else {
$( '.specials-bar' ).fadeOut();
}
});
});.specials-bar{
background-color:#ffffff;
display: none;
font-size: 20px;
font-weight: 700;
padding: 10px;
position: fixed;
height: 40px;
text-align: center;
width: 100%;
z-index: 9999;
color: #000;
}
.specials-bar .admin-bar{
margin-top:32px;
}
.specialscontainer {
text-align: center;
}
@media only screen and (max-width: 800px) {
.specials-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 */
}
}
// 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' );
}
// Register widget areas.
genesis_register_sidebar( array(
'id' => 'specials',
'name' => __( 'specials', 'villa-pro' ),
'description' => __( 'This is the specials area', 'villa-pro' ),
) );
add_action('genesis_before_header','specials_bar_widget');
function specials_bar_widget() {
genesis_widget_area( 'specials', array(
'before' => '<div class="specialscontainer specials-bar "><div class="wrap"><div class="widget-area">',
'after' => '</div></div></div>',
) );
}