A sticky menu for your WordPress site!

Following on from my last project update for adding a second menu, this update takes the idea of the secondary menu and creates a nifty looking sticky menu that floats at the top of your pages after you’ve scrolled down.

Sticky Menu JavaScript

First up, creating the JavaScript that triggers when the user has scrolled down past the primary menu for your page/site.   Referencing a couple of different sites I found the need to make two changes – first to enqueue the new javascript file in WordPress (find out more about enqueuing in the WordPress codex) and then to actually create the JavaScript for the functions.

functions.php addition

The “right” way to add more JavaScript to a WordPress installation is to enqueue it as mentioned above, to do this I made the following addition to my child theme’s functions.php file:


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

This code queues the new JavaScript file (mine’s called scrollingNav.js) to load in the correct order, ensuring the jquery dependency is obeyed.

scrollingNav.js file

This file was largely developed here, but modified for my purposes including statically defining the point at which the secondary menu appears and changing the speed of the fadeOut function when hiding it again:


/*
 function to show menu when scrolled down past the ability to see the regular menu
 */
jQuery(document).ready(function ($) {

// grab the initial top offset of the navigation
 var offset_top = 100;

 // our function that decides whether the navigation bar should have "fixed" css position or not.
 var sticky_navigation = function(){
 var scroll_top = $(window).scrollTop(); // our current vertical position from the top

 // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
 if (scroll_top > offset_top) {
 $('#scrollingNav').css({ 'position': 'fixed', 'top':0, 'left':0 });
 $('#scrollingNav').fadeIn();
 } else {
 $('#scrollingNav').css({ 'position': 'relative' });
 $('#scrollingNav').fadeOut(50);
 }
 };

 // run our function every time you scroll
 $(window).scroll(function() {
 sticky_navigation();
 });
});

Styles

Finally, just modified the styles to initially hide the secondary menu, and format it to fit in with the site design.  I won’t bother you with the details here, but let me know if you’d like to see them and I can update!

Update!

I wanted to post a quick update to this project – after my beautiful wife took a look, she found that the Hayden Theme actually modifies the menu to a drop down menu when you get to a certain screensize (responsiveness at work).  So, poked around a little and found two additional changes that needed making:

theme_trust.js

Obviously, a theme specific JS file that Hayden includes – in here is a quick jQuery call to utilize the tinymenu.js library which takes any ul or ol element and makes a select function with the same options and effects.  updated to this:


function setMobileNav(){
jQuery('#mainNav .sf-menu').tinyNav({
header: 'Navigation',
active: 'current-menu-item'
});

jQuery('#scrollingNav .sf-menu').tinyNav({
header: 'Navigation',
active: 'current-menu-item'
});
}

This update just runs the tinyNav function against the new nav I created at the same time it runs for the main Theme’s main nav.

styles.css

And a quick update to the Child Theme styles.css file to correctly hide and display the .tinynav class element at the right screen resolutions:

<pre>#scrollingNav .tinynav {
 display: none;
}

@media only screen and (max-width: 700px) {
 #scrollingNav .sf-menu {
 display: none;
 }

 #scrollingNav .tinynav {
 display: block;
 margin: 0 auto;
 padding: 0;
 }
}

That’s all folks – enjoy!

Loading Facebook Comments ...

Leave a Reply