Twitter Bootstrap Question posted in

Navigation Overlay Hamburger Menu Click Issues-Twitter bootstrap

I have built a hamburger navigation that when clicked overlays the navigation elements on a full screen coloured background.

I have a couple of slight bugs which i cannot work out my mistake(s), or how to rectify them.

  1. When you click the hamburger icon and the overlay is then displayed, if you then click anywhere on the background colour, the overlay closes. How can i keep the overlay visible unless a link or the close icon/button is clicked?

  2. When you click a link, the overlay disappears (as expected) but then returns again after a split second. How can i stop this ‘flashing’ when clicked, so i can either keep the overlay showing until new page is loaded or hide the overlay once clicked.

$(document).ready(function() {
  $(".menu-btn a").click(function() {
    var scroll = $(window).scrollTop();
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');

    if ($(this).hasClass('btn-close')) {
      $(".navbar").css("background-color", "grey");
    } else if (scroll > 100) {
      $(".navbar").css("background-color", "#CEB400");
    }
  });

  $('.overlay').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
  });

  $('.menu a').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
  });

});

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 100) {
      if ($('.overlay:visible').length == 0) {
        $(".navbar").css("background-color", "#CEB400");
      }
    } else {
      $(".navbar").css("background-color", "grey");
    }
  });
});
/* OPEN / CLOSE BTNS */

.menu-btn {
  z-index: 999;
  display: inline;
  /* font-size: 32px; */
}

.menu-btn a {
  display: flex;
  text-decoration: none;
  color: #ffffff;
  /* safari hack */
  align-items: center;
}

.btn-open:after {
  color: inherit;
  content: "f394";
  font-family: "Ionicons";
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition-property: all .2s linear 0s;
  font-size: 40px;
}

.btn-open:hover:after {
  color: inherit;
}

.btn-close:after {
  color: inherit;
  content: "f2d7";
  font-family: "Ionicons";
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition-property: all .2s linear 0s;
  font-size: 40px;
}

.btn-close:hover:after {
  color: #ffffff;
}

.template-home .btn-open:after,
.template-home .btn-open:hover:after,
.template-home .btn-close:after,
.template-home .btn-close:hover:after,
.template-home .menu-btn a span {
  color: #ffffff!important;
}


/* OVERLAY */

.overlay {
  position: fixed;
  top: 0;
  z-index: 99;
  display: none;
  overflow: auto;
  width: 100%;
  height: 100%;
  background: rgba(209, 180, 0);
}

.overlay .menu {
  margin: 150px 20px;
  /* width: 80%; */
}

.overlay .menu ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

.overlay .menu ul li {
  float: left;
  padding: 6px 0 0 0;
  width: 100%;
  list-style: none;
  text-align: left;
  text-transform: uppercase;
}

.overlay .menu ul li#social {
  width: 100%;
  margin-top: 50px;
}

.overlay .menu ul li a {
  color: #d1b400;
  font-weight: 300;
  font-size: 20px;
  font-family: 'Old Standard TT', serif;
}

.overlay .menu ul li#social a {}

.overlay .menu ul ul {
  margin-top: 20px;
}

.overlay .menu ul ul li {
  position: relative;
  float: none;
  margin: 10px 0;
  width: 100%;
  border: 0;
}

.overlay .menu ul ul li a {
  color: #fff;
  text-transform: capitalize;
  font-weight: 300;
  font-size: 30px;
}

.overlay .menu ul ul li a:hover {
  color: #000000;
}


/* RESPONSIVE */

@media screen and (max-width: 768px) {
  .overlay .menu ul li {
    float: none;
    margin-bottom: 25px;
    width: 100%;
  }
  .overlay .menu ul li:last-child {
    border: 0;
  }
  .overlay .menu ul ul {
    margin-top: 20px;
  }
  .menu-btn {
    right: 25px;
  }
}

.allexamples {
  position: absolute;
  bottom: 0;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  background: #e9e9e9;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #333;
  position: fixed;
}

.menu-social {
  display: inline-block;
  margin: 0 .4em;
}

.menu-social a {
  width: 44px;
  height: 44px;
  padding: 0;
  background-image: url("../img/cd-socials.svg");
  background-repeat: no-repeat;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.menu-social .menu-facebook a {
  background-position: 0 0;
}

.menu-social .menu-instagram a {
  background-position: -44px 0;
}

.menu-social .menu-dribbble a {
  background-position: -88px 0;
}

.menu-social .menu-twitter a {
  background-position: -132px 0;
}

.overlay .menu ul ul li.description {
  padding: 0px 0 10px 0px;
}

.overlay .menu ul ul li.description span {
  color: #000000;
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
}

p.tel,
p.email {
  margin: 0 0 3px 0;
}

p.tel a {
  color: #fff!important;
  font-weight: 300!important;
  font-size: 20px!important;
  letter-spacing: 1px;
}

p.email a {
  color: #fff!important;
  font-weight: 300!important;
  font-size: 20px!important;
  text-transform: none;
}

.menu-btn a span {
  font-size: 16px;
  color: #ffffff;
  /* line-height: 18px; */
  font-weight: 600;
  position: relative;
  /* top: -5px; */
  right: 10px;
}

.navbar-text div {
  display: inline-block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.header-contact svg {
  margin-left: 10px;
  font-size: 22px;
}

.header-contact {
  margin-right: 75px;
}

.header-contact a {
  color: #ffffff;
}

.header-contact {
  font-weight: 600!important;
  font-size: 16px!important;
}

.navbar {
  -webkit-transition: background-color 500ms ease-in-out;
  -ms-transition: background-color 500ms ease-in-out;
  transition: background-color 500ms ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
  <nav class="navbar fixed-top" style="background-color: grey;">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="img/pb-white.png" width="30" height="30" alt="">
      </a>
      <span class="navbar-text">
        <div class="menu-btn">
          <a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
        </div>
      </span>
    </div>
  </nav>
</header>
<div class="overlay">
  <div class="menu">
    <div class="container">
      <ul>
        <li>
          <ul>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href="#">Heading</a></li>
            <li><a href="#">Heading</a></li>
            <li><a href="#">Heading</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

<div style="height:2000px;"></div>

I currently have my work on a codepen here: https://codepen.io/whitinggg/pen/bLzxGG

Tags:

2

Answers


  1. 0

    To solve both your problems :

    You need to remove the onClick event of your overlay, I.E. those lines : 

    $('.overlay').on('click', function () {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});

    This will stop triggering event when you click on overlay.

    Your first issue is then fixed, and your second issue was that by clicking on a link, you also click on the overlay which contains the link, so the event was triggered twice, and your overlay fade out and in, creating the blink effect.

    Login or Signup to reply.
  2. 0

    Just remove this line of code from the script

    $('.overlay').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search