Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Tatiana Frambach
Tatiana Frambach
7,791 Points

How to close toggle overlay menu when clicking navigation item anchor link?

Hi guys

So, I have a one-page layout with several sections, and its respective anchors are in the menu as items pointing out to those sections down that same page. When a link is clicked from the overlay menu, I managed to make it automaticaly close but now it doesn't open again. Here's my code:

HTML

<div class="overlay" id="nav-overlay">
  <nav class="overlay-menu" id="overlay-menu">
    <ul>
      <li ><a class="nav-link" href="#" data-target="intro">Home</a></li>
      <li><a class="nav-link" href="#" data-target="about-section">About</a></li>
      <li><a class="nav-link" href="#" data-target="hero-section-1">Projects</a></li>
      <li><a class="nav-link" href="#" data-target="contact-section">Contact</a></li>
    </ul>
  </nav>
</div>

Jquery

// Hamburger Menu

$('#button-toggle').click(function() {
   $(this).toggleClass('active');
   $('#nav-overlay').toggleClass('open');
  });


// Close after clicking on a li

$('#nav-overlay li').on('click', function(){
    $("#nav-overlay").hide();
    $("#button-toggle").removeClass("active");
});

How to make it re-open when the menu icon is clicked again?

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Without seeing the rest of the code (including the CSS), this may or may not have other side-effects. But it addresses the immediate issue.

:point_right: Add a call to "show" on this line:

   $('#nav-overlay').toggleClass('open').show(); // <-- added .show()

Happy coding!   -sp:sparkles: