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
Download a free start-up child theme here
9 thoughts on “Add Scrollspy to the Navbar”
Any chance of a version that: links color to theme-color and maybe an added “down” button (helpful to indicate that more content follows)? 🙂
Hi Rune,
What do you mean by:
Can you please be more specific ?
Thanks for your feedback!
Hi Nicolas
I might have had a CSS conflict, just tried the scrollspy option again and now it updates properly with the theme color 🙂
Great, glad to hear that.
I’m sorry you’ve had problems with this snippet. Difficult to know what is missing without seeing links to your sites. My site that has it working is: http://www.scmtc.co.uk
Probably best if you open up a new thread in the Forum with a link to your site so I can work out what I’ve missed.
Hi Dave,
am I missing something? other than pasting your snippets in the style.css and functions.php
what I’m supposed to do exactly within the page or the post?
I know that I have to organize content, somehow, but do you have any tip on this?
A sample to grab and study would also come handy to achieve something nice like:
Themes&co Documentation
Thanks!
Unfortunately the above code didn’t work for me either. I used it in child theme style.css and it didn’t do anything.
Hi:
I try this code,but nothing happened. For testing my environment ,I did the http://www.presscustomizr.com/snippet/move-menu-navbar-box/ and successful.
I download the child-theme.copy the css code to style.css, and copy the php code to function.php
Is there some setting I miss?
Sorry to hear that. It is a new Snippet which worked for me, but maybe I missed something.
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And important, please include a link to your Site.