Link not redirecting to other pages but works when directed to a division on the same page

Question

I have a navbar and the links are not working in it. When I go to the source code ( Ctrl + U ) and then click on the link, it redirects me properly.

Also when I remove the JavaScript, it works but doesn't provide the required transition.

 (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); console.log(link); new Clipboard(link); link.addEventListener('click', function() { classie.add(link, 'link-copy--animate'); setTimeout(function() { classie.remove(link, 'link-copy--animate'); }, 300); }); }); })(window); 

 <section class="section section--menu" id="Valentine"> <nav class="menu menu--valentine" style="position: fixed; top: 0px; right: 10px; width: 100%; float: right; background-color: black"> <ul class="menu__list"> <li class="menu__item menu__item--current"><a href="#" class="menu__link">Home</a></li> <li class="menu__item"><a href="{% url 'speakers' %}" class="menu__link">Speakers</a></li> <li class="menu__item"><a href="{% url 'partners' %}" class="menu__link">Partners</a></li> <li class="menu__item"><a href="#" class="menu__link">Blog</a></li> <li class="menu__item"><a href="#contact" class="menu__link">Contact</a></li> </ul> </nav> </section> 

What should I do? I'm pretty sure the error is due to the JavaScript.

Answer 1

On setCurrent you are using ev.preventDefault(); . The Default event, which you are preventing, is to go to the link.