Moving Element to certain position when button is clicked

Question

I've created a responsive mobile navbar which when clicked will slide links from the right. But when clicking a list item on that navbar it will go to the assigned section but won't hide the navbar which stays stuck at the top of the page. Clicking the hamburger icon does slide the navbar back in place but will stay at the top if a list item is clicked to an assigned section of the page. How can I fix this? Navbar Screenshot

 // Hamburger Menu $(document).ready(function() { $("#icon").click(function() { $('.nav-links').toggleClass("show"); }) })

 .nav-bar { background-color: #57595B; height: 40px; display: flex; align-items: center; position: sticky; top:0; z-index:5000; text-align: center; width:100%; }.nav-links{ top:0; display: flex; justify-content: space-around; right:0; text-align: center; margin:auto; margin-right: 30px; position:absolute; font-size:20px; padding-bottom:0; }.act:hover{ color:#00dbde; }.act:active { color: #00dbde; }.nav-links li{ margin:auto; list-style: none; padding:0px 18px; text-align: center; transition: 1s; }.nav-links a{ margin:auto; padding: 0px; text-decoration: none; color:white; text-align: center; transition: 1s; } /*Mobile Nav*/ #icon{ color:white; font-size: 30px; line-height: 30px; float:right; margin-right:20px; cursor: pointer; display:none; top:0; } /* Media Query */ @media screen and (max-width:480px){.image1, #logo-h1{ position: absolute; left:0; }.image1{ margin-top:10px; } #logo-h1{ margin-left:25px; }.nav-bar{ height:30px; } #icon{ display: block; right:0; float: right; position: absolute; top:0; }.nav-links{ position: absolute; width:97%; background: #3b6978; border-top-left-radius: 20%; border-bottom-left-radius: 20%; top:277px; right:-1200px; text-align: center; height:90vh; display:block; transition: all.7s; }.nav-links li{ display:block; display: inline-block; line-height: 60px; }.nav-links a{ font-size:20px; }.nav-links.show{ right:277px; }.logo-links{ width:100% }.skills-container{ width:100%; display: grid; grid-template-columns: 50% 50%; padding: 20px; }.contact-page{ height:90vh; }.contact-links{ width:100%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <.--Nav Bar--> <div class="nav-bar"> <div><img class="image1" src="/Images/Logo/LogoSymbol.png"></div> <div class="title1"> <h1 id="logo-h1">Botshelo Ramela</h1> <div class="desktop-nav"> <div class="links"> <ul class="nav-links"> <li class="lis"><a href="#" class="home links act" data-link="#homePage">Home</a></li> <li class="lis"><a href="#abt-me-link" class="about-me links act" data-link="#aboutMePage">About</a></li> <li class="lis"><a href="#split2" class="skills links act" data-link="#skillsPage">Skills</a></li> <li class="lis"><a href="#split4" class="contact-page links act" data-link="#contactPage">Contact</a></li> </ul> </div> </div> </div> <div class="mobile-nav"> <label id="icon"> <i class="fas fa-bars"></i> </label> </div> </div>

`

Answer 1

In that case you can try use hide and show functions for hide and unhide the nav-links , here an example:

 // Hamburger Menu $(document).ready(function() { $("#icon").click(function() { if($(".nav-links").css("display").= "none"){ $('.nav-links');hide(). }else{ $('.nav-links');show(); } }) })

 .nav-bar { background-color: #57595B; height: 40px; display: flex; align-items: center; position: sticky; top:0; z-index:5000; text-align: center; width:100%; }.nav-links{ top:0; display: flex; justify-content: space-around; right:0; text-align: center; margin:auto; margin-right: 30px; position:absolute; font-size:20px; padding-bottom:0; }.act:hover{ color:#00dbde; }.act:active { color: #00dbde; }.nav-links li{ margin:auto; list-style: none; padding:0px 18px; text-align: center; transition: 1s; }.nav-links a{ margin:auto; padding: 0px; text-decoration: none; color:white; text-align: center; transition: 1s; } /*Mobile Nav*/ /*#icon{ color:white; font-size: 30px; line-height: 30px; float:right; margin-right:20px; cursor: pointer; display:none; top:0; }*/ /* Media Query */ @media screen and (max-width:480px){.image1, #logo-h1{ position: absolute; left:0; }.image1{ margin-top:10px; } #logo-h1{ margin-left:25px; }.nav-bar{ height:30px; } #icon{ display: block; right:0; float: right; position: absolute; top:0; }.nav-links{ position: absolute; width:97%; background: #3b6978; border-top-left-radius: 20%; border-bottom-left-radius: 20%; top:277px; right:-1200px; text-align: center; height:90vh; display:block; transition: all.7s; }.nav-links li{ display:block; display: inline-block; line-height: 60px; }.nav-links a{ font-size:20px; }.nav-links.show{ right:277px; }.logo-links{ width:100% }.skills-container{ width:100%; display: grid; grid-template-columns: 50% 50%; padding: 20px; }.contact-page{ height:90vh; }.contact-links{ width:100%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <.--Nav Bar--> <div class="nav-bar"> <div><img class="image1" src="/Images/Logo/LogoSymbol.png"></div> <div class="title1"> <h1 id="logo-h1">Botshelo Ramela</h1> <div class="desktop-nav"> <div class="links"> <ul class="nav-links"> <li class="lis"><a href="#" class="home links act" data-link="#homePage">Home</a></li> <li class="lis"><a href="#abt-me-link" class="about-me links act" data-link="#aboutMePage">About</a></li> <li class="lis"><a href="#split2" class="skills links act" data-link="#skillsPage">Skills</a></li> <li class="lis"><a href="#split4" class="contact-page links act" data-link="#contactPage">Contact</a></li> </ul> </div> </div> </div> <div class="mobile-nav"> <label id="icon">test <i class="fas fa-bars"></i> </label> </div> </div>