So I have bootstrap menu that is one my one page site and its really good but it has one issue.
When on a mobile viewpoint and you click on the hamburger it launches the side panel, when a user clicks on a link (anchor link in my case to a section on the page) it will take you to the anchor but the side panel remains in position. I want it so that when the link is clicked the side panel disappears from view.
I have tried to look for solutions but to no success, I think it doesn't work because the solution depends on how the menu was made so if anyone can help me out here it would be greatly appreciated.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo"><a href="index.html">Brand<span class="text-primary">.
</span> </a></h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li><a href="#home-section" class="nav-link">Home</a></li>
<li class="has-children">
<a href="#about-section" class="nav-link">About Us</a>
<ul class="dropdown">
<li><a href="#team-section" class="nav-link">Team</a></li>
<li><a href="#pricing-section" class="nav-link">Pricing</a></li>
<li><a href="#faq-section" class="nav-link">FAQ</a></li>
<li><a href="#gallery-section" class="nav-link">Gallery</a></li>
<li><a href="#services-section" class="nav-link">Services</a></li>
<li><a href="#testimonials-section" class="nav-link">Testimonials</a></li>
<li class="has-children">
<a href="#">More Links</a>
<ul class="dropdown">
<li><a href="#">Menu One</a></li>
<li><a href="#">Menu Two</a></li>
<li><a href="#">Menu Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#blog-section" class="nav-link">Blog</a></li>
<li><a href="#contact-section" class="nav-link">Contact</a></li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-
facebook"></span></a></li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-
twitter"></span></a></li>
<li class="social"><a href="#contact-section" class="nav-link"><span
class="icon-linkedin"></span></a></li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative; top:
`3px;"><a href="#" class="site-menu-toggle js-menu-toggle float-right"><span
class="icon-menu h3"></span></a></div>`
</div>
</div>
</header>
<div class="hero"></div>
