title: CSS links not working on click
body: <p>I'm working on overlay menu and I have 2 menus, one is shown when overlay is hidden and second is in that overlay (other one is hidden when you click on hamburger and activate overlay). My problem is that when you click on links (I tried to put www.google.com in href ) nothing happens, it just refresh it self like there is "#" in href. 
  In my overlay I also have a part with social links and that links are working, but non of links in menus are (not a classic or overlay menu links are not working)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".button a").click(function() {
      $(".overlay").fadeToggle(200);
      $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
  });
  $('.overlay').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
  }
  ul {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
  li {
    padding: 0;
    margin: 0;
  }
  nav {
    text-align: center;
    width: 100%;
    position: relative;
    height: auto;
    overflow: hidden;
    background: none;
  }
  nav ul {
    text-align: center;
    z-index: 999;
  }
  nav ul li {
    display: inline-block;
    z-index: 999;
  }
  nav ul li a {
    color: #333;
    display: inline-block;
    padding: 1em 3em;
    text-decoration: none;
    border-bottom: 2px solid #fff;
    transition-property: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    font-size: 16px;
    z-index: 999;
  }
  nav ul li a:hover {
    color: #34B484;
  }
  /*styling open close button*/
  
  .button {
    display: inline;
    position: absolute;
    right: 50px;
    top: 6px;
    z-index: 999;
    font-size: 30px;
  }
  .button a {
    text-decoration: none;
  }
  .btn-open:after {
    color: #333;
    content: "\f0c9";
    font-family: "FontAwesome";
    transition-property: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
  }
  .btn-open:hover:after {
    color: #34B484;
  }
  .btn-close:after {
    color: #fff;
    content: "\f00d";
    font-family: "FontAwesome";
    transition-property: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
  }
  .btn-close:hover:after {
    color: #34B484;
  }
  /*overlay*/
  
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: #333;
    overflow: auto;
    z-index: 99;
  }
  .wrap {
    color: #e9e9e9;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
  }
  .wrap ul.wrap-nav {
    border-bottom: 1px solid #575757;
    text-transform: capitalize;
    padding: 150px 0px 100px;
    z-index: 999;
  }
  .wrap ul.wrap-nav li {
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    width: 24%;
    position: relative;
    z-index: 999;
  }
  .wrap ul.wrap-nav li a {
    color: #34B484;
    display: block;
    padding: 8px 0;
    text-decoration: none;
    transition-property: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    z-index: 999;
  }
  .wrap ul.wrap-nav li a:hover {
    color: #f0f0f0;
  }
  .wrap ul.wrap-nav ul {
    padding: 20px 0;
    z-index: 999;
  }
  .wrap ul.wrap-nav ul li {
    display: block;
    font-size: 13px;
    width: 100%;
    color: #e9e9e9;
    z-index: 999;
  }
  .wrap ul.wrap-nav ul li a {
    color: #f0f0f0;
    z-index: 999;
  }
  .wrap ul.wrap-nav ul li a:hover {
    color: #34B484;
  }
  .social {
    font-size: 25px;
    padding: 20px;
  }
  .social p {
    margin: 0;
    padding: 20px 0 5px 0;
    line-height: 30px;
    font-size: 13px;
  }
  .social p a {
    color: #34B484;
  }
  .social-icon {
    width: 80px;
    height: 50px;
    background: #e9e9e9;
    color: #333;
    display: inline-block;
    margin: 0 20px;
    transition-property: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
  }
  .social-icon:hover {
    background: #34B484;
    color: #f0f0f0;
  }
  .social-icon i {
    margin-top: 12px;
  }
  @media screen and (max-width: 48em) {
    .wrap ul.wrap-nav &gt; li {
      width: 100%;
      padding: 20px 0;
      border-bottom: 1px solid #575757;
    }
    .wrap ul.wrap-nav {
      padding: 30px 0px 0px;
    }
    nav ul {
      opacity: 0;
      visibility: hidden;
    }
    .social {
      color: #c1c1c1;
      font-size: 25px;
      padding: 15px 0;
    }
    .social-icon {
      width: 100%;
      height: 50px;
      background: #fff;
      color: #333;
      display: block;
      margin: 5px 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="http://facebook.com"&gt;Company&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Social&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="button"&gt;
      &lt;a class="btn-open" href="#"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="overlay"&gt;
    &lt;div class="wrap"&gt;
      &lt;ul class="wrap-nav"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Company&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Workplace&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="https://www.google.hr/"&gt;Web Design&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Consultanct&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Centers&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Social&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Facebook&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Google Plus&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;LinkedIn&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;WhatsApp&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Address&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Phone&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Email&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Map&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="social"&gt;
        &lt;a href="http://mario-loncarek.from.hr/"&gt;
          &lt;div class="social-icon"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;a href="#"&gt;
          &lt;div class="social-icon"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;a href="#"&gt;
          &lt;div class="social-icon"&gt;&lt;i class="fa fa-codepen"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;a href="#"&gt;
          &lt;div class="social-icon"&gt;&lt;i class="fa fa-behance"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;a href="#"&gt;
          &lt;div class="social-icon"&gt;&lt;i class="fa fa-dribbble"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;p&gt;From: Zagreb, Croatia
          &lt;br&gt;Site: &lt;a href="http://mario-loncarek.from.hr/"&gt;mario-loncarek.from.hr&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>