GeckoGrafix
8/5/2016 - 11:29 PM

Specials Bar Can be used as an alternative Menu bar on scroll

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

	) );

}