What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

I created a navigation menu using HTML and SCSS, but I'm facing an issue where the menu does not close when clicking on links inside it. The menu continues to overlay the content on the page instead of closing. Essentially, I want the navigation menu to close automatically when a link is clicked.
Here's my HTML code 

    <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
    <label for="navi-toggle" class="navigation__button">
                  <span class="navigation__icon">&nbsp;</span>
    </label> 
    <div class="navigation__background">&nbsp;</div>
    <div class="navigation__nav">
      <div class="container-fluid" id="hd">
      <div class="row">
        <div class="col-9 col-md-5 col-lg-5" id="both">
          <h6 class="fw-b" id="in-nav">-on the web- </h6>
          <div class="social-links fs-5 mb-4 end text-dark">
            <i class="bi bi-twitter"></i>
            <i class="bi bi-facebook"></i> 
             <i class="bi bi-github"></i><br>  
            <i class="bi bi-linkedin"></i>          
            <i class="bi bi-instagram"></i>
            <i class="bi bi-medium"></i>
        </div>
        <div class="mb-4">
  <a class="resume" href="afolabi-resume.pdf" target="_blank" rel="noopener noreferrer">Resume 📙</a>
        </div>    
      </div>  
        <div class="col-5 col-md-6 col-lg-6">
          <div class="list">
            <h6 class="fw-b" id="in-nav" style="margin-left:2rem;">-navigation-</h6>
            <ul class="ul">
              <li class="list-item"><a href="/" id="c" >Home</a></li>  
              <li class="list-item"><a href="#projects" id="c">Projects</a></li>
              <li class="list-item"><a href="#stacks" id="c">Stacks</a></li>
              <li class="list-item"><a href="#social-links" id="c">Contact</a></li>
            </ul>
        </div>
        </div>
      </div>
    </div>
  </div>
  </div>
htmlcssonclicknavigation

Answer â„–1

If I were to tackle this, my approach would involve implementing a JavaScript onClick function to conceal the top-level DIV element of the navigation bar.

I came across a relevant discussion on this topic that might be worth exploring.

Update

In a previous project of mine, I utilized the following code: Within my HTML page structure, I included:

<div id="overlay" style="display:block;"></div>
<div id="tos" style="display:block;">

For the A HREF link, I incorporated:

onclick="toggleOverlay('tos')

and the corresponding JavaScript snippet was as follows:

function toggleOverlay(overlay) {
    // Obtain the DOM reference
    var tosId = document.getElementById(overlay);
    var overlayId = document.getElementById("overlay");
    // Toggle visibility
    tosId.style.display == "block" ? tosId.style.display = "none" : tosId.style.display = "block";
    overlayId.style.display == "block" ? overlayId.style.display = "none" : overlayId.style.display = "block";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show User-Uploaded Image on Redirected Webpage with Flask and html

My goal is to develop a webpage where users can submit an image, and upon submission, they are redirected to a new page displaying the rendered image. I have referenced the code from How to pass uploaded image to template.html in Flask for guidance, but un ...

pythonhtmlformsflaskrequest

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

I've been attempting to create a basic dropdown menu using Bootstrap dropdown, and so far, it's been working perfectly in most instances. However, on certain pages, when I click on the three dots that are supposed to activate the dropdown, nothin ...

phpjqueryhtmlcss

Switch between multiple unordered lists (ul) so that when one list is clicked, the other lists reset to their initial state as though they were never

When I click on the first item in the ul list, it should slideToggle() to show its corresponding items. Similarly, when I click on the second item in the ul list, its items should slideToggle(), but the first ul list remains visible as well. What I am tryi ...

javascriptjqueryhtmlcss

Issue with specific selectors causing React CSS module malfunction

Currently, I am a beginner in learning React and have been experimenting with CSS modules. Even though Menu.module.css is mostly functioning correctly, it seems to be having an issue applying styles to the .menu a.last selector for some reason (although i ...

javascriptcssreactjsmoduleselector

Sort the images before uploading them

Hey everyone, I'm having an issue with the sortable feature. I am currently using AJAX to temporarily save images and display them without uploading. Now, I would like to be able to sort those images and have a button to save the sorted version. The ...

javascriptjqueryhtmlajax

Apply the CSS style to make one element identical to another, while modifying a single property

I am currently working with the following CSS: input[type="text"] { border: 2px solid rgb(173, 204, 204); height: 31px; box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; transition:500ms all ease; padding:3px 3px 3px 3px; } My goal i ...

css

Ways to eliminate the yellow highlighting on a row

In my current application, I am incorporating jqGrid and aiming to apply custom styling to it. To start, my objective is to eliminate the yellow highlighting effect that appears when clicking on a row in the jqGrid css. Despite my attempts, I have been u ...

jquerycssjqgrid

Is there a way to access a large HTML file?

Currently, I have been utilizing a Python script to compare data and the resulting differences are saved in an HTML file. However, the size of the file has ballooned to 158 MB due to significant differences, making it impossible for me to open in any brows ...

htmlbrowser

What is the method for adjusting the position of this box-shadow?

As a beginner in coding, I stumbled upon this box shadow effect online but I am struggling to adjust it to match the font style I am using. Here is the CSS for the title: .sidebar-title { position:absolute; z-index:150; top:100px; left:330px; ...

htmlcssbox-shadow

Center 3 elements horizontally using Flexbox, ensuring the center element is aligned properly

Is it possible to center 3 elements using flexbox on a page? The middle element should be centered on the page, while the left and right elements can vary in width. Please refer to the image below: I am not certain if this layout is achievable with flexbo ...

cssflexbox

Determine the variance among time stamps

After creating a registration page, I implemented functionality where when a user clicks the submit button, an activation link is sent to their email and a timestamp is stored in the database. To ensure security, I need to verify if the activation link was ...

phphtmldatabasecodeignitertimestamp

What is the best method for eliminating the initial character in every line of a textarea?

The desired output should display as LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no instead of >LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no. Is there a way to achieve this using JavaScript? Specifically, the ">" character at the be ...

javascripthtml

Issue with Javascript functionality not persisting after page reload initiated with a href = '#'

I am facing an issue with a button on my webpage that is meant to redirect and reload the home page. However, after redirection to '#', my JavaScript seems to stop functioning correctly. Currently, my JavaScript code is enclosed within window.on ...

javascriptjqueryhtmlanchor

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

javascriptjqueryhtmlcss

What is the best way to make img-fluid function properly within Bootstrap Carousel?

I've been struggling to make my carousel images responsive by using the img-fluid tag, but I haven't had any success. I've attempted using !important and display: block, but nothing seems to work. I'm not sure what's causing the is ...

javascripthtmlcssbootstrap-4

What is preventing CSS from adding a line break for the input element?

Here's a clever way to insert a new line before every span tag. span { display: inline; } span:before { content: "\a "; white-space: pre; } <p> First line.<span>Next line.</span> <span>Next line.</span& ...

htmlcssnewline

Ensuring proper functionality of JQModal when displayed above an iframe with the usage of ?wmode=

Here's an interesting one... I'm currently working on a site with JQModal and everything seems to be functioning properly except for the fact that the iframe appears on top of the modal. An easy fix is to append ?wmode=opaque at the end of the ...

javascripthtmliframejqmodal

The span's presence causes the neighboring span to shift downwards

HTML <span class="symbol">$</span> <span class="value">400</span> This code snippet displays the symbols "$" and "400" at the same level in the document. However, if we introduce some styling using CSS: .symbol { font-size: 2e ...

htmlcss

I am looking to navigate between tabs on a multi-part form in order to submit all the form data

My current form consists of five questions, each on a separate tab. What I am trying to achieve is the following: When the user submits the form data on the fifth tab An Ajax request sends the form data to a background script for processing Simultaneousl ...

phpjqueryhtmlajaxtwitter-bootstrap

Adjusting the line-height in CSS dynamically based on the length of characters using jQuery

I am facing an issue with the Twitter widget on my website where our company's latest tweet sometimes gets cut off if it exceeds a certain length. I want to dynamically adjust the line-height CSS property of the element based on the tweet's chara ...

phpjavascriptjquerycss