Wordpress: Highlight active menu color on scroll and on click - wordpress

Question

i am working on this Wordpress website and as you can see is a one scroll landing page. Every section as an id and this class id is connected to the navigation points like this
Example:
http://ergon.nowcommu.myhostpoint.ch/home/#idee
What i need is to highlight the active navigation point when you scroll with the mouse on the sections and when you click on the navigation on the relative link.
How can i do it?

Answer 1

Your website has already been built with functionality that changes the class of the menu item once it's content/counterpart is in the viewport of the end user.
If you inspect the element, you will notice that the a tags in your menu receive a class .mPS2id-highlight when their content counterparts are in view.
Thusly, you can simply add a CSS rule to achieve your goal.
I've tested the rule below in firebug on your website and it seems to work fine (the !important was necessary):
.mPS2id-highlight {
color: #b51339 !important;
}
If you would like to keep your border functionality, you can use the following rules instead:
.cssmenu > ul.menu > li:hover {
border-bottom: 0 solid;
}
.mPS2id-highlight {
border-color: #b51339 !important;
color: #b51339 !important;
}

Answer 2

You need declare the highlight with javascript particularly you do with jquery in custom code de your wordpress with something like this:
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
also you look at the console of the browser because it have an error in your page