title: Auto-close navigation on item selection
body: <p>How can I make the below menu close when an item is clicked?</p>
  
  <p>The menu is a fixed sidebar on desktop and is a toggle menu on mobile. This is fine, but the menu takes up half the screen when open and when a nav item is clicked, the page scrolls down to that section but the menu stays open, blocking the content unless you close it but I don't want to add any unnecessary steps for visitors</p>
  
  <p>Thank you</p>
  
  <p>Here's the js</p>
  
  <pre><code>//// NAVBAR COLLAPSE
  var rNav = $(".right-nav"),
    hInfo = $(".home .info"),
    home = $(".home"),
    navBtn = $(".slide-nav-btn"),
    navBtnActive = "slide-nav-btn-active",
    nav = $(".slide-nav"),
    navActive = "slide-nav-active",
    rNavSpan = $(".right-nav ul li i"),
    up = $(".up i"),
    body = $("html, body");
  rNav.css("top", (home.height() - rNav.height()) / 2);
  hInfo.css("top", (home.height() - hInfo.height()) / 2);
  navBtn.on("click", function() {
    $(this).toggleClass(navBtnActive);
    nav.toggleClass(navActive)
  
  });
  </code></pre>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div class="menu navbar-sp"&gt;
                  &lt;nav&gt;
                      &lt;ul id="navbar"&gt;
                          &lt;li class="active"&gt;
                              &lt;a href="#home" data-scroll-nav="0" class="active"&gt;
                                  &lt;i class="fa fa-home"&gt;&lt;/i&gt; Home
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#about" data-scroll-nav="1"&gt;
                                  &lt;i class="fa fa-user-o"&gt;&lt;/i&gt; About
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#services" data-scroll-nav="2"&gt;
                                  &lt;i class="fa fa-tasks"&gt;&lt;/i&gt; Services
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#resume" data-scroll-nav="3"&gt;
                                  &lt;i class="fa fa-gears"&gt;&lt;/i&gt; Resume
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#portfolio" data-scroll-nav="4"&gt;
                                  &lt;i class="fa fa-suitcase"&gt;&lt;/i&gt; Portfolio
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#blog" data-scroll-nav="5"&gt;
                                  &lt;i class="fa fa-comments-o"&gt;&lt;/i&gt; Blog
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#contact" data-scroll-nav="6"&gt;
                                  &lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt; Contact
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
  </code></pre>