Sticky Menu on Genesis site.

@wp sticky menu.md

##How to Add a Sticky Menu to the Top of Your Website

You might be wondering what a sticky menu is … and the answer is simple. When you scroll down the page of a website, you’ll see a navigation menu that literally sticks to the top of the screen. This is a great way to provide access to important pages on your website regardless of where your viewer is on the page.

####ADD A STICKY MENU

There are only a few steps required to create a sticky menu for your site. First you’ll need to download the Genesis Sample theme as you’ll need it to follow the steps below. If you are using one of our StudioPress themes or a custom Genesis theme, this will merely serve as guidance.

To get started, create a custom menu and head to Appearance > Menus > Manage Locations and assign your menu to the Secondary Navigation Theme Location.

After you’ve created your custom menu, there are 3 sets of code that you need to implement — functions.php, sticky-menu.js and style.css.

1. functions.php

Below is the code to add to your theme’s functions file. The first is the function that will enqueue the sticky-menu.js file and the second is the function that will reposition the Secondary Navigation menu at the top of your page.

2. sticky-menu.js

In your theme’s folder, create a new folder called js, and then create a new file inside the js folder called sticky-menu.js. Copy and paste the code below into the sticky-menu.js file. This will control the fade in/out effect on the sticky menu for your site.

Here’s what the path should look like: genesis-sample/js/sticky-menu.js

3. style.css

Lastly, add CSS to style your sticky menu to help make it stand out. Feel free to modify or add to this as necessary.

To get your menu links to align right as shown in the demo, add a sticky-right menu class in the CSS Classes option.

functions.php

<?php
//* Do NOT include the opening php tag

//* Enqueue sticky menu script
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
function custom_enqueue_script() {
	wp_enqueue_script( 'sticky-menu', get_stylesheet_directory_uri() . '/js/sticky-menu.js', array( 'jquery' ), '', true );
}

//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before', 'genesis_do_subnav' );

sticky-menu-items.js

jQuery(document).ready(function(){

	jQuery('#menu-item-6836 a').click(function() {
		jQuery('#sticky-search').slideToggle('fast');
		return false;
	});

	jQuery('#menu-item-6837 a').click(function() {
		jQuery('#sticky-follow').slideToggle('fast');
		return false;
	});

});

sticky-menu.js

jQuery(function( $ ){
	$(window).scroll(function() {
		var yPos = ( $(window).scrollTop() );
		if(yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top
			$("#subnav").fadeIn();
		} else {
			$("#subnav").fadeOut();
		}
	});
});

style.css

/*
Sticky Menu
---------------------------------------------------------------------------------------------------- */

#subnav {
	background-color: #1e1e1e;
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

#subnav .wrap {
	margin: 0 auto;
	position: relative;
	width: 1152px;
}

#subnav .genesis-nav-menu.menu-secondary {
	border: none;
}

.genesis-nav-menu.menu-secondary a {
	color: #fff;
	padding: 20px;
	padding: 1.25rem;
}

.genesis-nav-menu.menu-secondary li.sticky-right {
	float: right;
}

.genesis-nav-menu.menu-secondary li li a,
.genesis-nav-menu.menu-secondary li li a:link,
.genesis-nav-menu.menu-secondary li li a:visited {
	background-color: #1e1e1e;
	border: 1px solid #fff;
	border-top: none;
	color: #fff;
	padding: 20px;
	padding: 1.25rem;
}

.genesis-nav-menu.menu-secondary li li a:hover {
	color: #ff2a00;
}