How to Add a Sticky Menu to your Genesis theme

I design primarily with Studiopress Genesis when creating custom designs for WordPress.org blogs and websites. And, a popular request these days is to have a sticky navigation menu for the design. A sticky menu is 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 your menu links – regardless of where your viewer is on the page. A couple of examples of designs I included this on are here and here.

Adding a sticky menu

NOTE: These instructions are for a self-hosted WordPress.org site using Genesis child themes. In addition to making changes in your WordPress Dashboard, you will also need access to your site’s FTP.

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 — sticky-menu.js, functions.php, and style.css.

1. sticky-menu.js

In your theme’s folder, create a new folder called js (this folder may already exist), 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.

When you’re viewing in FTP this is what the path should look like: genesis-child-theme/js/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
$(".nav-secondary").fadeIn();
} else {
$(".nav-secondary").fadeOut();
}
});
});

2. 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.

//* Enqueue sticky menu script
add_action( 'wp_enqueue_scripts', 'sp_enqueue_script' );
function sp_enqueue_script() {
wp_enqueue_script( 'sample-sticky-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-menu.js', array( 'jquery' ), '1.0.0' );
}

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

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.

/* Secondary Navigation
--------------------------------------------- */

.nav-secondary {
background-color: #333;
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}

.nav-secondary .genesis-nav-menu a {
padding: 20px;
}

.nav-secondary .genesis-nav-menu .sub-menu a {
padding: 16px 20px;
}

.nav-secondary a:hover,
.nav-secondary .current-menu-item > a,
.nav-secondary .menu-item-home > a,
.nav-secondary .menu-item-home > a:hover {
color: #fff;
}

.nav-secondary .sub-menu a:hover {
color: #333;
}

You may need to make adjustments to the CSS depending on which theme you are using.

If you don’t want to DIY you may hire me to do it for you – contact me with your information.

The post How to Add a Sticky Menu to your Genesis theme appeared first on Carrie Loves.