Add Scrollspy to the Navbar

Last Reviewed: 8-Jun-15 (3.3.23) 3.1.* 3.2.* 3.3.*

If you need to add Scrollspy to the Navbar:

Where to copy/paste this code?
We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* START OF Add Scrollspy to the Navbar (Needs additional php code in Child Theme functions.php) */
/* Scrollspy nav-pills - adapt if needed */
.navbar .nav > .active > a,
.navbar .nav > .active > a:focus,
.navbar .nav > .active > a:hover {
    background-color: #0088CC;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
    text-shadow: none;
    color: #000;
    text-decoration: none;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
}
/* END OF Add Scrollspy to the Navbar (Needs additional php code in Child Theme functions.php) */

 

Where to copy/paste this code?
We strongly recommend you create a child theme and add this to the Child Theme functions.php.
Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php.

// START OF Add Scrollspy to the Navbar (Needs additional CSS code in Child Theme style.css)
add_action('__after_footer' , 'rdc_scrollspy_script');
function rdc_scrollspy_script() {
    ?>
      <script type="text/javascript">
        jQuery(document).ready(function ($) {
            ! function ($) {
                //prevents js conflicts
                "use strict";
                $('body').scrollspy({ target: '.navbar' });
              }(window.jQuery);
        });
      </script>     
    <?php
}
// Add scrollspy requirements to body tag
add_filter('tc_body_attributes' , 'rdc_body_attributes');
function rdc_body_attributes($current_body_attributes) {
    return 'data-spy="scroll" data-target=".navbar" data-offset="10"' . $current_body_attributes;
}

// Add nav-pills to <ul> class-header-menu.php
add_filter('tc_add_menuclass' , 'rdc_add_menuclass');
function rdc_add_menuclass( $ulclass) {
      $html =  preg_replace( '/<ul>/' , '<ul class="nav nav-pills">' , $ulclass, 1);
      return apply_filters( 'tc_add_menuclass', $html );
}
// END OF Add Scrollspy to the Navbar  (Needs additional CSS code in Child Theme style.css)
To make this change, you must create a child theme. Everything you need to know about creating a child theme with Customizr here.
Download a free start-up child theme here

9 thoughts on “Add Scrollspy to the Navbar”

Comments are closed.