Remobile Pro and Sticky Message

[Jim Goodrich]

I'm developing a site using remobile pro and want to use a sticky message, as outlined in Brian Gardner's post at http://briangardner.com/genesis-sticky-message/.

The issue is that the sticky message sits on top of the primary navigation and responsive menu so the links aren't accessible through the sticky message area, even though it doesn't display until the visitor has scrolled down by 100px. I believe the answer is in the z-index, but I'm not finding the solution. There's a .js file I won't post here, but here's the php from the Functions.php:

//* Register sticky message widget area
genesis_register_sidebar( array(
	'id'          => 'sticky-message',
	'name'        => __( 'Sticky Message', 'bg-mobile-first' ),
	'description' => __( 'This is the sticky message widget area.', 'bg-mobile-first' ),
) );

//* Hook sticky message before site header
add_action( 'genesis_before', 'mobile_first_sticky_message' );
function mobile_first_sticky_message() {

	genesis_widget_area( 'sticky-message', array(
		'before' => '<div class="sticky-message">',
		'after'  => '</div>',
	) );

}

//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'mobile_first_sticky_message_scripts' );
function mobile_first_sticky_message_scripts() {

	wp_enqueue_script( 'mobile-first-stickey-message', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-message.js', array( 'jquery' ), '1.0.0' );

}

And here is the css for the sticky message:

.sticky-message {
	background-color: #d31145;
	font-size: 16px;
	opacity: 0;
	padding-bottom: 20px;
	padding-top: 20px;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 999;
}

.sticky-message {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition:    all 0.3s ease-in-out;
	-ms-transition:     all 0.3s ease-in-out;
	-o-transition:      all 0.3s ease-in-out;
	transition:         all 0.3s ease-in-out;
}

.sticky-message.reveal {
	opacity: 1;
}

.sticky-message,
.sticky-message a:hover,
.sticky-message p {
	color: #fff;
}

.sticky-message a {
	color: #fff;
}

.sticky-message p:last-child {
	margin-bottom: 0;
} 

The dev site is http://vah.jamesgoodrich.net. What am I missing?

http://vah.jamesgoodrich.net

[Jim Goodrich]

I was overthinking, looking for the difficult answer with z-index. It ended up being two simple z-index changes. First, cahnge the default z-index to -1 on the sticky message itself

.sticky-message {
	background-color: #d31145;
	font-size: 16px;
	opacity: 0;
	padding-bottom: 20px;
	padding-top: 20px;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: -1;
}

Second, add a z-index of 999 to the sticky-message .reveal:

.sticky-message.reveal {
	opacity: 1;
        z-index: 999;
}

And the primary navigation and responsive menu sits nicely on top and when the sticky message reveals at 100px, its message is on top as well.

[Author]

Posts