Cómo ocultar la barra de navegación plegable sin usar boostrap

  html, javascript, menu

I’m new to this world of technology and I just created one of my first menus.
I created this collapsible navigation bar that does not use boostrap, but I think it works fine, but I would like it to close when the user clicks on a link. Will someone want to help me? Thank you, I will be very grateful

html navigation bar:

    <header class="header">
        <div class="main-menu">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-3 col-xs-12">                       
                        <!-- Logo -->
                        <div class="logo">
                            <a href="index.html"><img class="logo-logo" src="img/logo-mwt.png" alt="my work tracking"></a>
                        <!--/ End Logo -->
                        <div class="mobile-nav"></div>
                    <div class="col-md-9 col-sm-9">
                        <nav class="navbar menu navbar-default">
                            <div class="collapse navbar-collapse">
                                <ul id="nav" class="nav mobile-menu navbar-nav">
                                    <li class="active nav-item"><a href="#hero-area">INICIO</a></li>
                                    <li class="nav-item"><a href="#beneficios">BENEFICIOS</a></li>
                                    <li class="nav-item"><a href="#funciones">FUNCIONES</a></li>
                                    <li class="nav-item"><a href="#experiencias">EXPERIENCIAS</a></li>
                                    <li class="nav-item"><a href="#pricing">PLANES</a></li>
                                    <li class="nav-item"><a href="#contact">CONTACTO</a></li>
        <!--/ End Header Inner -->
    <!-- /End Header Area -->

Source: Ask Javascript Questions