CSS links not working on click

Question

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)

$(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;
});

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 > 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;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="http://facebook.com">Company</a>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Social</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
  <div class="button">
    <a class="btn-open" href="#"></a>
  </div>
</nav>

<div class="overlay">
  <div class="wrap">
    <ul class="wrap-nav">
      <li><a href="#">Company</a>
        <ul>
          <li><a href="#">About</a>
          </li>
          <li><a href="#">Blog</a>
          </li>
          <li><a href="#">Workplace</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Services</a>
        <ul>
          <li><a href="https://www.google.hr/">Web Design</a>
          </li>
          <li><a href="#">Consultanct</a>
          </li>
          <li><a href="#">Products</a>
          </li>
          <li><a href="#">Centers</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Social</a>
        <ul>
          <li><a href="#">Facebook</a>
          </li>
          <li><a href="#">Twitter</a>
          </li>
          <li><a href="#">Google Plus</a>
          </li>
          <li><a href="#">LinkedIn</a>
          </li>
          <li><a href="#">WhatsApp</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">Address</a>
          </li>
          <li><a href="#">Phone</a>
          </li>
          <li><a href="#">Email</a>
          </li>
          <li><a href="#">Map</a>
          </li>
        </ul>
      </li>
    </ul>

    <div class="social">
      <a href="http://mario-loncarek.from.hr/">
        <div class="social-icon"><i class="fa fa-facebook"></i>
        </div>
      </a>
      <a href="#">
        <div class="social-icon"><i class="fa fa-twitter"></i>
        </div>
      </a>
      <a href="#">
        <div class="social-icon"><i class="fa fa-codepen"></i>
        </div>
      </a>
      <a href="#">
        <div class="social-icon"><i class="fa fa-behance"></i>
        </div>
      </a>
      <a href="#">
        <div class="social-icon"><i class="fa fa-dribbble"></i>
        </div>
      </a>
      <p>From: Zagreb, Croatia
        <br>Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
      </p>
    </div>
  </div>
</div>

I don't understand your problem. Clicking "Web Design" works as expected — Sumurai8
– Sumurai8, Commented Feb 7, 2015 at 16:23

Jingjie Zheng · Accepted Answer · 2015-02-07 16:24:14Z

6

The online integrated development environment you are using prevents you from directing your page to an external url (to your current project).

The console shows the following message while clicking a link to facebook.com: Refused to display 'https://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'DENY'.

You would probably need to use an editor not on the web (e.g., Sublime Text) and test your web page locally.

answered Feb 7, 2015 at 16:24

Jingjie Zheng

4523 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

riogrande Over a year ago

Ty i lost a whole day for this issue

Collectives™ on Stack Overflow

CSS links not working on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related