html - css styling for .active link not working for single page using sections -

html - css styling for .active link not working for single page using sections -

i've been emailed zip file of template purchased themeforest , they've asked me modify it. there's horizontal nav bar has number of links on different sections on page (it's single page website), , in unmodified template, active nav link (whether home, team, services or contact) has different background colour depending on 1 clicked. when utilize my modified page, "active nav link" styling doesn't appear work.

i can't figure out it's going wrong. may not familiar various scripts or bootstrap css beingness linked page.

i have tried changing name of .active class .viewing in case it's pseudo/naming conflict , doesn't create difference.

the nav bar source follows:

<div class="span9 nav-wrapper"> <nav> <ul> <li><a href="#section-home" id="nav-home" class="active">home</a></li> <li><a href="#our-team" id="nav-team">team</a></li> <li><a href="#our-services" id="nav-services">services</a></li> <li><a href="#contact-section" id="nav-contact">contact</a></li> </ul> </nav> <div class="header-phone-number"><span>call on</span> <i class="icon-phone"></i> 1800 25 1800</div> </div>

and css applies links is:

nav { color: #fff; text-transform: uppercase; display: inline-block; padding: 26px 20px; font-size: 12px; font-family: 'open sans',sans-serif; } nav a:hover { background: #616a73; } nav a:hover, nav a:visited { color: #fff; text-decoration: none; outline: none; } nav a.active { background: #4c5660 url(../img/banner-bg.jpg); color: #fff; outline: none; }

can point me in right direction of how ".active" class works particular navigation bar , how applied other nav links when clicked? jquery thing? why modified page "broken" when think i've changed template nav bar colours?

thanks in advance.

there's wrong jquery.

if next bit runs class of active works fine:

$('nav a').click(function(){ $('nav a').removeclass('active'); $(this).addclass('active'); var href= $(this).attr('href'); if ( guardianismobile === true ){ $('.nav-wrapper').hide(); } $.scrollto( href, 800, { onafter : function(){ //add function after animation here if required } , offset: -30 //use position window want }); homecoming false; });

if @ console on site getting next error:

uncaught typeerror: cannot read property 'offsetwidth' of null

this error references custom.js line 148 is:

var map = new google.maps.map(document.getelementbyid("contact-map"),mymapoptions);

maybe map goofing up?

html css