Lock Voce Theme Menu to Top when Scrolling

This short 12 minute video will walk you through the process of setting up the Voce Theme's main menu to be able to lock to the top of the browser window when the page begins scrolling.  We will look at the simple CSS needed and the basics of the small bit of jQuery that is used to add and remove the CSS class.

Webinar Originally Broadcast: July 27, 2024

Video Download: HD Download | Mobile Download

Additional Notes:

Example Code:

CSS

.fixed {
 position:fixed;
 top:0;
}

jQuery

jQuery(document).ready(function($){
  $(window).bind('scroll', function() {
    if($(window).scrollTop() > 150){
      $('#menu-area-standard').addClass('fixed');
    } else {
      $('#menu-area-standard').removeClass('fixed');
    }
  })
});

Oh and don’t forget you may need to enable jQuery to load on your site. (Many sites already have this, but if you are getting an error of something jQuery undefined just add this code to your functions.php file.

function add_jquery_to_site(){
   wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'add_jquery_to_site');