Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Genesis HelloBar Preheader Full Width
<?
//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>';
}
.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;
}
}
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();
}
});
});
<?
//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>';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.