jquery toggle menu icon when click function

Question

I found nice tutorial for responsive overlay menu (http://thecodeblock.com/full-screen-overlay-navigation/) but its full of bugs so i decided to make it better and post it for everyone but now i need help with something.

They put images for menu link (hamburger menu) so i made that with font awesome and its working i have two classes btn-open with bars icon and btn-close with close icon. Also i think their jquery was rather complicated so i wrote new one and its really simple and i have only one problem and everything else is working properly.

JQUERY

$(document).ready(function(){
    $(".button a").click(function(){
        $(".overlay").fadeToggle(200);
       $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
 $('.overlay').on('click', function(){
   $(".overlay").fadeToggle(200);   
   $(this).toggleClass('btn-open').toggleClass('btn-close');
 open = false;
 });

CSS:

nav{
 text-align: center;
  width=100%;
 margin: 0 auto;
 position: relative;
 height: 110px;
 overflow: hidden;
}
nav ul{
 min-height: 55px;
 padding: 30px 0;
 text-align: center;
}
nav ul li a:hover{
 background-color: #f0f0f0;
}
nav ul li{
 display: inline-block;
}
nav ul li a{
 color: #000;
 display: inline-block;
 padding: 1em 3em;
 background-color: rgba(170, 170, 170, 0.06);
 text-decoration: none;
}
/*styling open close button*/
.button{
 display: inline;
 position: absolute;
 right: 50px;
 top: 40px;
 z-index: 999;
 font-size:30px;
}
.button a{
    text-decoration:none;
}
.btn-open:after {
 color:#333;
 content:"\f0c9";
 font-family:"FontAwesome";
 }

.btn-close:after {
 color:#fff;
 content:"\f00d";
 font-family:"FontAwesome";
 }
/*overlay*/
.overlay{
 display: none;
 position: fixed;
 top: 0;
 height: 100%;
 width: 100%;
 background: #333;
 overflow: auto;
 z-index:99;
}
.wrap{
 color: #fff;
 text-align: center;
 max-width: 1100px;
 margin: 0 auto;
}
.wrap ul.wrap-nav{
 border-bottom: 1px solid #575757;
 text-transform: capitalize;
 padding: 150px 0px 100px;
 z-index:99;
}
.wrap ul.wrap-nav > li{
 font-size: 22px;
 display: inline-block;
 vertical-align: top;
 width: 24%;
 position: relative; 
}
.wrap ul.wrap-nav > li a{
 color: #d6d6d6;
 display: block;
 padding: 8px 0;
 text-decoration: none;
}
.wrap ul.wrap-nav > li a:hover{
 color: #f0f0f0;
}
.wrap ul.wrap-nav ul{
 padding: 20px 0;
}
.wrap ul.wrap-nav ul li{
 display: block;
 font-size: 16px;
 width: 100%;
 color: #919191;
}
.wrap ul.wrap-nav ul li a{
 color: #fff;
}
.social{
 color: #c1c1c1;
 font-size: 16px;
 padding: 20px;
}




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

}

HTML

<nav>
 <ul>
 <li><a href="https://www.google.hr/">Company</a></li>
 <li><a href="https://www.google.hr/">Services</a></li>
 <li><a href="https://www.google.hr/">Social</a></li>
 <li><a href="https://www.google.hr/">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">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, recusandae, magnam, sapiente, iure deleniti repudiandae est tempora repellat fugiat aliquid nihil assumenda non placeat cum minus aut qui. Ipsa, aut.
 </div>
 </div>
 </div>

So like i said i have to classes btn-open and btn-close . When i click on menu button (.button class) my icons are toggling and everything works perfectly. But when i try to make toggle icon when you click anywhere when overlay $('.overlay').on('click', function() is shown its not working and its not toggling icons

Here is working example http://codepen.io/riogrande/pen/gbXxdx

ranakrunal9 ranakrunal9 · Accepted Answer · 2015-02-07T12:16:16

Use following code so that when you click on overlay anywhere toggle icon is displayed :

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

jquery toggle menu icon when click function

1 Answers