I have a fixed navigation where the nav items are clicked and smoothscroll to sections on the page and add an active class to the menu item.
It was working perfectly when developing locally on localhost but now that I've moved the site live it gives the error:
Uncaught Error: Syntax error, unrecognized expression: /#about-section
throw new Error("Syntax error, unrecognized expression: " + a)
jQuery(document).ready(function($) {
var sections = $('section'),
nav = $('nav'),
nav_height = nav.outerHeight();
$(window).on('scroll', function() {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');
}
});
});
nav.find('a').on('click', function() {
var $el = $(this),
id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});
});
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="menu-not-landing-main-menu" class="nav navbar-nav navbar-right">
<li id="menu-item-442" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-442 active active">
<a href="/#about-section">About</a>
</li>
<li id="menu-item-443" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-443 active active">
<a href="/#speakers-section">Speakers</a>
</li>
<li id="menu-item-444" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-444 active active">
<a href="/#mini-zeminars-section">Mini Zeminars</a>
</li>
</ul>
</div>
Remove slash /
from the all anchor tag href
, like
<li id="menu-item-442" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-442 active active">
<a href="#about-section">About</a>
</li>
<li id="menu-item-443" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-443 active active">
<a href="#speakers-section">Speakers</a>
</li>
<li id="menu-item-444" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-444 active active">
<a href="#mini-zeminars-section">Mini Zeminars</a>
</li>
You will be good to go then ;)