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

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...

javascriptjqueryhtmlcheckbox

Is it possible to simultaneously center and display an iframe inline?

I have a YouTube video that I'm trying to center within a div. After adding display: block; to the CSS following advice from How to center an iframe horizontally?, it centers correctly, but now I want to display two images inline next to the iframe ...

htmlcssiframe

Create text that alternates between blinking and changing content simultaneously

I'm currently working on a website and I am curious about how to achieve the effect of making text blink and change content simultaneously, similar to what is seen on this particular website . Sorry for not being more specific in my question. Thank yo ...

javascriptjqueryhtml

how to enable drag and drop functionality based on names in angularjs

In my project using angular js, I have implemented a drag and drop feature that allows items to be dragged between cells in two directions. I now want to enhance this functionality by allowing members with 'a's (e.g. 1a, 2a, etc.) to be dragged ...

htmlangularjs

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

javascriptjqueryhtmlcss

Unable to examine a specific component

As I attempt to inspect an element by right-clicking and selecting "Inspect," I encounter the following details: Screenshot1 Screenshot2 Despite trying the code snippet below, it did not yield the desired results for me: driver.findElement(By.id("tmsMo ...

htmlseleniumtesting

What is the best way to create floating text that appears when clicked, similar to the mechanics

https://i.stack.imgur.com/nRKG1.jpg Upon clicking the "big cookie" in my game, a popup appears displaying the number of cookies earned (like +276.341 septillion in this image). The popup slowly moves upward and then fades out. I successfully incorporated ...

javascripthtmlcsscss-animationscss-transitions

What is the reason for min-content not being compatible with auto-fill or auto-fit?

My confusion lies in the fact that this code snippet works: .grid { display: grid; grid-template-columns: repeat(4, min-content); } Whereas this one does not: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } I am ...

csscss-gridfluid-layoutcss-multicolumn-layout

Can the HTML attributes produced by AngularJS be concealed from view?

Is there a way to hide the Angular-generated attributes such as ng-app and ng-init in the HTML code that is output? I want to present a cleaner version of the HTML to the user. Currently, I am using ng-init to populate data received from the server, but ...

javascripthtmlangularjs

"Enhancing User Experience with AngularJS by Dynamically Modifying and Refresh

I'm currently attempting to dynamically add HTML elements using JavaScript with a directive: document.getElementsByClassName("day-grid")[0].innerHTML = "<div ng-uc-day-event></div>"; or var ele = document.createElement("div"); ele.setAttr ...

javascripthtmlangularjs

Ensure the sum is recalculated whenever the input changes by using the jQuery change event

I am creating a system that requires the total values of multiple inputs to not exceed 100. I have successfully implemented this functionality, but now I need a way to automatically adjust the total if changing one input causes it to drop below 100. Here& ...

javascriptjqueryhtml

What is the best way to show a label and select box side by side using Angular Material?

I have been trying to keep input and label in the same line using Angular Material, but I haven't found a solution yet. Most of the available solutions are in HTML and CSS, but I specifically need a way using Angular Material. The method I tried invo ...

cssangularangular-materialangular-reactive-formsangular-flex-layout

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is there a way to enable a scrollbar for the last section only in fullpage.js? This is what I attempted: $("#section3").fullpage({ scrollBar: true, fitToSection: false, }); Unfortunately, it didn't work as expected. ...

jqueryhtmlcssfullpage.js

Developing a Multi-Stage Pop-Up with Jquery

I am interested in creating a custom multi-step modal This particular div has dynamically generated classes $('.modal-content').append('<div class="modal-body step step-' + key + '" data-step="'+key+'"></div> ...

javascriptjqueryhtml

The onclick event seems to be malfunctioning on the website

My goal is to implement a modal box that appears when a user clicks a button and closes when the user interacts with a close button within the modal box. I have created two functions for this purpose: check() : This function changes the CSS of an element ...

javascriptcsshtmluser-interface

Managing numerous range sliders in a Django form

My Request: I am looking to have multiple Range sliders (the number will change based on user selections) on a single page. When the sliders are moved, I want the value to be updated and displayed in a span element, as well as updating the model. The Issu ...

javascriptjqueryhtmlcssdjango

arrange objects into an array depending on punctuation marks

Currently, I am in the process of developing a method to retrieve data from my MySQL database and present it as an array. However, the issue I am facing is that only one string of data is accessible at a time, with each instance separated by a comma. For e ...

phphtmlmysql

Looking for assistance in creating a stunning portfolio showcase?

As I work on building my portfolio webpage, I've realized that with my limited knowledge of HTML/CSS, creating a great gallery might be challenging. In search of an efficient solution, I ventured across the web but couldn't find anything that ful ...

htmlcss

Unchanging Dive Field

I'm having trouble understanding why this field isn't updating with the correct number. It seems that any value less than 1 is being rounded in the alert() function. I believe all numbers are simply getting rounded down, but I'm unsure of an ...

javascripthtmlcss

I've been attempting to access the Marketo API, but unfortunately, I haven't had any luck

I've been attempting to make a Marketo API call, but I keep encountering this issue: net::ERR_NAME_NOT_RESOLVED Here is the code snippet I'm using for the function: var marketoAPIcallURL = 'https://182-EMG-811.mktorest.com/rest/v1/ ...

jqueryhtmlajaxapimarketo