Links not working in Full Page Navigation menu for a single page website

Question

The links on this page are not working even though li.a tags target to proper section IDs.

HTML:

<header>
  <a href="#0" class="nav_icon"><i></i></a>
</header>

<nav id="main_nav">
  <ul>
    <li><a href="#red">Red</a></li>
    <li><a href="#green">Green</a></li>
    <li><a href="#blue">Blue</a></li>
    <li><a href="#yellow">Yellow</a></li>
  </ul>
  <a href="#0" class="nav_icon close"><i></i></a>
</nav>

<div id="wrapper">
  <section id="red">Red</section>
  <section id="green">Green</section>
  <section id="blue">Blue</section>
  <section id="yellow">Yellow</section>
</div>

Am I missing something here? Codepen: https://codepen.io/soumyajitn/pen/BZaGmv

Answer 1

Since your script return false after clicking a link, it also cancel the links default behavior, so if you comment out that in your script, it will work

$( "#main_nav ul li a" ).click(function() {
  $( "#wrapper" ).toggleClass( "hide" );
  $( "#main_nav" ).toggleClass( "show" );
  $('.nav_icon').toggleClass('active');

  //return false;                            comment out this line

});

Updated codepen