by clicking the link closes the toggle menu

Question

Hello!

I created a menu on a page that contains anchors in the links, which lead to a certain site of the page when clicked and it is working cute.

When I view the site on a smaller screen, the Nav is replaced by the hamburger button that will show the links from the menu when the hamburger is clicked, so far- ok, works right too.

When the burger is clicked, the menu opens exposing the links, which are on top of all the content of the site what is expected and normal, but I want this menu to be "disabled" when any menu item is clicked.

For example: If someone clicks on, in addition to the screen scrolling until the session"on", I want the menu to be picked up and just the burger button again waiting to be clicked again.

This is my menu: https://codepen.io/daisy-brazil/pen/qLGpPm

If anyone can help I’d be very grateful.

Answer 1

You have to put the toggleClass event when you click on the menu item as well... Basically the same script that you use in Btn Hamburger you have to use when you click on some menu link.

---

Code referring to image above::

I left the comment in the code where I made the script

 var topOffset = 0;
$(document).ready(function(){
  $(window).scroll(function(){
    $('nav').toggleClass('nav-up', $(window).scrollTop() > topOffset);
    topOffset = $(window).scrollTop();
  });
});


$( ".hamburger" ).click(function() {
    $(".hamburger").toggleClass("is-active");
    $( ".navbar__menu" ).toggleClass( "navbar__menu--active" );
});





$("a").click(function() {
    $(".hamburger").removeClass("active");
    $("#toggle").removeClass("on");
});

//script que fecha o menu quando clica no item

$( ".navbar__link" ).click(function() {
    $(".hamburger").toggleClass("is-active");
    $( ".navbar__menu" ).toggleClass( "navbar__menu--active" );
});

/*=======================
	HEADER gi2 
=======================*/
.hamburger {
   float:right;
    padding: 5px 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible; }
    .hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::before,
    .hamburger.is-active .hamburger-inner::after {
      background-color: rgba(245, 241, 234, 1); }
  
  .hamburger-box {  
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative; }
  
  .hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; }

    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { float:right;
      width: 40px;
      height: 4px;
      background-color: #FC427B;
      border-radius: 4px;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease; }
    .hamburger-inner::before, .hamburger-inner::after {
      content: "";
      display: block; }
    .hamburger-inner::before {
      top: -10px; }
    .hamburger-inner::after {
      bottom: -10px; }


/*Collapse Transition   X   */
  .hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .hamburger--collapse .hamburger-inner::after { 
      top: -20px;
      transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }

    .hamburger--collapse .hamburger-inner::before {
      transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  
  .hamburger--collapse.is-active .hamburger-inner {
   background-color: #FC427B;
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .hamburger--collapse.is-active .hamburger-inner::after {
      top: 0;
      opacity: 0;
      transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
    .hamburger--collapse.is-active .hamburger-inner::before {
      background-color: #FC427B;
      top: 0;
      transform: rotate(-90deg);
      transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }





/*--------------------
menu
--------------------*/
nav { /*--header--*/
    text-align: center;
    color: #e8e8e8;
    display: block;
    background:#e76d80;
    height: 66px;
    position: fixed;
    top: 0;
    padding: 20px 0;
    transition: 0.5s;
    width: 100%;
 z-index: 1000;
}

nav.nav-up {
  transform: translateY(-100%);
}



/*--------------------
Mobile
--------------------*/

.navbar {
    display: flex;
    justify-content: center;
    max-width: 1250px;
    margin: 0 auto;
    font-size: 1.5em;
    height: 40px;
    padding: 0 15px;
z-index: 10000;
}

.logo {
    margin-right: auto;
}



.navbar__item {
    color: #fff;
    text-decoration: none;
    line-height: 60px;
}



.navbar__menu{
    background-color: transparent;
    opacity: 0;
    transition: background-color 0s;
}

.navbar__menu a {
    color:#badc58;
}
.navbar__menu a:hover {
    color:#f9ca24;
}





.navbar__menu--active { /*--background transparente--*/
    opacity: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: absolute;
    top: 56px;
    height: 100vh;
    width: 100vw;
    background-color: rgba(22, 22, 22, 0.85);
    transition: background-color .4s; 
margin-top:60px;
}

/*--------------------
Tablet & Desktop
--------------------*/

@media (min-width: 600px) {
    .navbar__menu {
        opacity: 1;
        display: flex;
        flex-direction: row;
        position: relative;
        top: auto;
        z-index: 1000;
    }
    .navbar__link {
        margin-right: 20px;
        
        color:#EAB543;
    }

    .navbar__link:last-child {
        margin-right: 0;
    }

    .navbar__menu--active {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        position: auto;
        height: auto;
        background: transparent;
    }

    .hamburger {
        display: none;
        padding:6px auto;
    }
}

/* Fim do meu header */

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 

  
  
<!-- /Menu--><!--gi-->
  
<nav>
<!---->
  <div class='navbar'>
<a class='navbar__item logo' href=''><img src='https://1.bp.blogspot.com/-E9Js5pcqXV0/XCOHvHI4hpI/AAAAAAAADPM/uD-g-Xgk6XUVsl0HuhbehG6wgYshbCydgCLcBGAs/s1600/logo-topo.png'/></a>
           
 <div class='navbar__menu'><!--biel-->
   <a id='ocultar' class='navbar__item navbar__link' href='#1'>Home</a>
   <a class='navbar__item navbar__link' href='#2'>Sobre</a>
   <a class='navbar__item navbar__link' href='#3'>Matérias</a>
   <a class='navbar__item navbar__link' href='#4'>Contato</a>
</div>
          
<span class='hamburger hamburger--collapse navbar__item' id='js-navbar-toggle'>
  <span class='hamburger-box'>
    <span class='hamburger-inner'/>
  </span>
</span>
  </div>  
<!---->
</nav>

<!-- /Menu -->
  
  <div class="container">



<section id='1' style='background:#C4E538; margin-top:120px;'>
  <h1>1</h1>
  <p>
  Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
</section>
  
  
 <section id='2' style='background:#EE5A24;'> 
   <h1>2</h1>
 <p>
  A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
     A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
  </section>

  
  
  <section id='3' style='background:#6F1E51;'> 
     <h1>3</h1>
<p>
  Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
  </section>  
    
    
   <section id='4' style='background:#EA2027;'>  
      <h1>4</h1>
 <p>
     A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
     A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
  A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
  
</p>
   </section> 
   


</div>
  
  
  
  
  
  
  <a id="toggle">teste</a>
 

</body>
</html>