Yesterday I launched the new design here on my site, which includes a number of things that are new to my personal theme. In other words, things I’ve never used before.
One of those is what’s known as a “sticky menu”, and it’s something that I really wanted to incorporate when I began the redesign process.
If you don’t know what I’m talking about, take a look at the top of the screen right now. Since you’re reading this, you’ve scrolled down far enough to trigger the sticky menu.
Now scroll back to the top of the page, and you’ll see the sticky menu disappear, giving way to the default header and navigation of my site.
As expected in yesterday’s comments, I was asked how this was implemented. To your surprise, as it was to mine, this is something that is really easy to do.
Adding a Sticky Menu
There’s only a few steps required to create a sticky menu for your site, so go ahead and
download the Genesis Sample theme as you’ll need it to follow the steps I mention below. If you are using a StudioPress or custom theme, this will merely serve as guidance.
You’ll need to create a custom menu through the WordPress dashboard, as the sticky menu that is shown at the top of your site will be displaying the
secondary navigation.
Moving along, there is 3 sets of code that you need to implement. You can see those at the bottom of this post — functions.php, sticky-menu.js and style.css.
1. functions.php
There are two things you need 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 another folder called js, and then create a new file called sticky-menu.js and place that inside. This file includes the jQuery that 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, you’ll see that I’ve provided a bit of CSS that can be applied to 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, assign them the
sticky-right menu class in the CSS Classes option.
Want to see what the sticky menu should look like?
Check out the demo site
Source :
www.briangardner.com
