After applying styles of Codrops in nav bar, I cannot make links go to the area id in a single page.
If I press "Clients" (for example), the link does not go to the id Clients area.
I need help in identifying the source of the problem.
Here is my HTML:
<nav class="menu menu--ferdinand">
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="#Services">Services</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#Clients">Clients</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#Us">About Us</a>
</li>
<li class="menu__item menu__item--current">
<a class="menu__link" href="#Contact">Contact</a>
</li>
</ul>
</nav>
script on the bottom of my index.html (I have classie.js, clipboard.min.js on js folder)
<script src="js/classie.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
var menuItems = menu.querySelectorAll('.menu__link'),
setCurrent = function(ev) {
ev.preventDefault();
var item = ev.target.parentNode; // li
// return if already current
if (classie.has(item, 'menu__item--current')) {
return false;
}
// remove current
classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
// set current
classie.add(item, 'menu__item--current');
};
[].slice.call(menuItems).forEach(function(el) {
el.addEventListener('click', setCurrent);
});
});
[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
new Clipboard(link);
link.addEventListener('click', function() {
classie.add(link, 'link-copy--animate');
setTimeout(function() {
classie.remove(link, 'link-copy--animate');
}, 300);
});
});
})(window);
</script>
Areas (example):
<section id="Clients" class="Clients">
</section>
<section id="Services" class="Services">
</section>
