Bootstrap scrollspy won't work

Question

I'm trying to implement Bootstrap Scrollspy on a website I'm working on but no matter what I do, I can't seem to get it to work (or do anything for that matter).

The website can be viewed at http://thecreativecompany.stage.webcomm.com.au/

Here's my JavaScript:

$(document).ready(function () {
    var offset_height = $("nav").height();

    $('#nav-wrapper').height(offset_height);

    $("nav").affix({
        offset: $("nav").position()
    });

    $('body').scrollspy({
        target: '#nav-menu',
        offset: offset_height
    });

    $('#menu li a').click(function (event) {
        var scrollPos = $('body').find($(this).attr('href')).offset().top - (offset_height - 1);

        $('body,html').animate({
            scrollTop: scrollPos
        }, 500);

        return false;
    });
});

Answer 1

I believe you're missing the .nav class in your menu. From the docs:

Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

So just add the class to your menu <ul>:

<div id="nav-menu">
    <ul id="menu" class="nav">
        <li><a href="#header">Home</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

Also, the result you'll get from the scrollspy plugin is an .active class being added to your list items, so I'm assuming you'll want to add a rule like this one to your CSS to go with your current styles:

#menu li.active:after {
    height: 6px;
}