Nav menu item icons and sticky menu on scroll in Genesis

This tutorial provides the steps to add icons above navigation menu's labels and to set up any menu of your choice to appear (fade into view) fixed/sticky at the top of the screen when scrolling down in Genesis. When scrolled all the way to the top, the sticky menu will fade out.

The sticky menu is going to contain a smaller sized logo and menu item icons.

At smaller widths, even smaller icons are set to appear to the left of menu items names when the hamburger menu is expanded.

The sticky menu is going to appear only for screen widths 1024px and above.

Desktop widths:

Upon scrolling down:

Mobile widths with the menu open:

While the tutorial has been written for Genesis Sample, it can be made to work with any Genesis child theme with some modifications

Step 1

Create a menu to be shown in Header Right widget area.

If you haven't already, go to Appearance > Widgets, drag a Custom Menu widget into the Header Right widget area and select your header menu.

Step 2

Let's add a bit of PHP to automatically create menu-item-<label> classes to the nav menu's list items.

Add this in child theme's functions.php:

add_filter( 'nav_menu_css_class', 'custom_add_item_label_as_class', 10, 3 );
/**
 * Automatically add `menu-item-<label>` class to nav menu items.
 *
 * @param array  $classes Nav menu item classes.
 * @param object $item Nav menu item data object.
 * @param array  $args Nav menu arguments.
 */
function custom_add_item_label_as_class( $classes, $item, $args ) {
    if ( 'Home' !== $item->title ) {
        $classes[] = 'menu-item-' . sanitize_title_with_dashes( $item->title );
    }

    return $classes;
}

Step 3

Upload your menu items' icons to child theme's images directory.

The dimensions of the images used in my test site are 63 x 52 although it would be ideal if the width were an even number.

Step 4

Set your logo image by going to Appearance > Header.

Step 5

We shall now add the sticky header having logo image + the header menu (or any menu of your choice) below the regular header.

The sticky header will be set to not appear initially via CSS and is going to be faded in on scrolling down and faded out when scrolling to the top via jQuery.

Back in functions.php, add