How to add multiple Slidebars in Genesis

Design objectives: Add a menu icon before existing Primary Navigation's menu items and a search icon at the end of menu items. Clicking the menu icon should slide open Primary Sidebar from the left edge of screen. Clicking the search icon should slide open Secondary Sidebar from the right edge of screen with focus in the Search input field. There should be Close buttons in each Slidebar.

This is another example or implementation of my earlier tutorial titled, App style off-canvas menus and sidebars using Slidebars in Genesis.

Screenshots:

Screencast:

Note: Modern Portfolio Pro is the active theme in my test site for this tutorial, with a few changes this should work in any Genesis child theme.

What's covered:

• Adding a custom ID to .site-container div.
• Adding custom classes to .sidebar-primary and .sidebar-secondary.
• Enqueuing files needed for Slidebars.
• Enqueuing Font Awesome for the hamburger, search and close icon fonts.
• Adding a menu icon before and a search icon after the menu items in Primary Navigation.
• Using actions to add close button above Primary and Secondary Sidebars' widget areas.
• Adding a tiny bit of JS to place focus in the search box when the right Slidebar slides open.

Step 1

Upload slidebars.min.js (check to see if a later version is available at https://github.com/adchsm/Slidebars/tree/master/distribution and if so, get the latest) to child theme's js directory.

Step 2

Create a file named slidebars-init.js in the same {child theme}/js directory having: