Navigation bar - not closing when clicking the current section

Question

Hello,

I have a working navigation bar sliding out of the page when the user clicks on the menu icon. It shows up only on mobile version of the website.

When u want to close the bar, you click on "x" or outside the div, somewhere in the background.

When I click on a section name, the page refreshes and the navigation closes. The problem appears when I click on the current section. The page does not refresh, so you have to close the navigation manually.

I want my navigation bar to close everytime an user clicks a link. Do you have any idea how can I achieve that?

This is my website: https://www.poznanprzeprowadzki.pl

This is my html for this part:

<div id="menu-mobile" class="menu-mobile">
    <div class="menu-mobile-close" onclick=closeNav()>
        <p>x</p>
    </div>
    <div class="menu-mobile-header">
        <img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>
        <p class="lang" key="you-are-free-to-contact">Zapraszamy do kontaktu!</p>
    </div>
    <a href="index.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="20px" height="20px" src="img/Home_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="home">Strona główna</p>
        </div>
    </div></a>
    <a href="about.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="20px" height="20px" src="img/About_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="about">O nas</p>
        </div>
    </div></a>
    <a href="gallery.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="20px" height="15px" src="img/Gallery_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="gallery">Galeria</p>
        </div>
    </div></a>
    <a href="contact.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="20px" height="15px" src="img/Contact_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="contact">Kontakt</p>
        </div>
    </div></a>
    <a href="advices.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="15px" height="20px" src="img/Advices2_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="advices">Pomoc / Porady</p>
        </div>
    </div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background" onclick=closeNav()>
    
</div>

This is my css for this part:

.menu-mobile {
    display: block;
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: -255px;
    background-color: rgba(100,100,100,1);
    overflow-x: hidden;
    transition: 0.4s;
}

.menu-mobile-close {
    position: absolute;
    top: 5px;
    right: 10px;
    transition: 0.05s;
}

.menu-mobile-background {
    right: 0;
    top: 0;
    position: fixed;
    overflow: hidden;
    z-index: 9998;
    width: 0px;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

.menu-mobile-header {
    min-width: 250px;
    padding: 16px;
    text-align: center;
    background-color: white;
}

.menu-mobile-header p {
    font-family: Open Sans;
    font-size: 14px;
    color: rgba(100,100,100,1);
    padding: 2px;
    font-weight: 500;
    display: block;
    white-space: nowrap;
}

.menu-mobile-header img {
    margin: 0 auto;
    height: 65px;
    padding-bottom: 6px;

}

.menu-mobile-close p:hover {
    color: rgba(240,240,240,1);
    cursor: pointer;
}

.menu-mobile-close p {
    font-family: Open Sans;
    font-size: 18px;
    color: rgba(100,100,100,1);
    font-weight: 600;
    display: block;
}

This is my JS for this part:

 function openNav() {
        document.getElementById("menu-mobile").style.right = "0px";
        document.getElementById("menu-mobile-background").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("menu-mobile").style.right = "-255px";
        document.getElementById("menu-mobile-background").style.width = "0px";
    }

Here is a picture of my navigation bar:

Answer 1

Add this script in your js file:

$(document).ready(function() {
    $('.menu-mobile a').click(function(e) {
       e.preventDefault(); // if the link don't reload all the page
       closeNav();
    })
});

Another solution, if you want to wait something before redirect:

$(document).ready(function() {
  $('.menu-mobile a').click(function(e) {
     e.preventDefault(); // is required
     closeNav();

      setTimeout(() => {
         const nextPage = e.currentTarget.href;
        window.location.href = nextPage;
      },1000) // set the time here in milliseconds    
  })
});