Clicking outside the navigation container will not cause it to disappear completely

When the width of my navigation bar reaches a maximum of 560px, a hamburger menu appears for mobile devices. I want to implement a functionality where clicking on a navigation item (e.g., About) will close the nav-container instead of making it disappear completely. Is there a way to achieve this? Also, I only want this behavior to take effect at a maximum width of 560px.

/*--------------------------------
FONTS
---------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*--------------------------------
RESET
---------------------------------*/
* {
  font-family: 'Noto Sans', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

/*--------------------------------
GLOBAL
---------------------------------*/
p {
  color: #767676;
  line-height: 23px;
  font-family: 'Nunito', sans-serif;
}

.btn {
  color: #fff;
  padding: 30px 60px;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 500;
  background-color: #daa37f;
  border-radius: 20px;
  text-align: center;
  text-transform: uppercase;

...

javascripthtmlcssnavigationnav

Answer №1

const ul = document.getElementsByTagName('ul')[0];
ul.addEventListener('click', () => {
  const data = document.getElementById('nav');
  data.checked = false
})
/*--------------------------------
FONTS
---------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Rest of CSS styling omitted for brevity */


<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="master.css">
</head>

<body>
  <nav>
    <input type="checkbox" id="nav" class="hidden" />
    <label for="nav" class="nav-open"><i></i><i></i><i></i></label>
    <div class="nav-container">
      <ul>
        <li><a href="#home" style="color:#d7a256">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#footer">Find us</a></li>
      </ul>
    </div>
  </nav>
</body>

</html>

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

Instantly refresh Vue props array within Axios callback

Today, I have a question that is quite general and simple, so I don't have any specific code to share. The basic steps involved are: Firstly, pass an array as a prop to a child component. Next, within the child component, iterate over the array usin ...

javascriptvue.js

Utilizing CSS to Select Specific Sections

I'm curious about how to target a section element with a specific id like #dress in CSS3. Here is my code snippet: <section id="dress"> <p>Lorem Ipsum..................................of Lorem Ipsum.<> </section> Here's ...

css

Experiencing difficulty with the communication between C# Controller and HTML/JavaScript View in the MVC framework

Struggling in my MVC web application with passing information between the controller and view. Specifically, I have two text fields in the view that I want to send information from to a method in the controller, then receive the result back in JavaScript t ...

javascriptc#.netajax

having difficulty reaching the globalProperties in vuejs v3

My latest project involves working with the Quasar framework in combination with vuejs 2 One of the key files in my project is located at /src/boot/gfunc.js import Vue from 'vue' Vue.prototype.$module = 'foo'; Within /quasar.conf.js ...

javascriptvue.jsvuejs2vuejs3quasar-framework

What is the best way to retrieve an AJAX response in advance of sending it to a template when utilizing DATAT

Recently, I've been working on integrating log tables into my admin panel using the datatable plugin. Despite setting up an ajax call in my datatable, I'm facing issues with retrieving the response before sending it to the table. Here's a s ...

javascriptphpjqueryajaxdatatable

Why is the Border Radius hiding the corners of my image?

I've never experienced this issue before, but no matter how much padding I add to the picture, the edges are still slightly covered up. Here is an example image (notice that it doesn't happen for every icon - the third one has a normal round back ...

htmlcss

Hover over the circle to expand its size, triggering the text to also grow larger

I am working on drawing an SVG circle pulled from a database along with its label. I am looking to have the stroke width of the circle and the text increase simultaneously when hovering over the circle. Would creating a CSS subclass be the best approach ...

htmlcsssvg

Alignment of badge-pill and h2 in a horizontal position

I'm currently working on mastering Bootstrap. My goal is to have a prominent heading followed by three small badge-pills that are horizontally centered on the page. However, I've run into a couple of issues: 1- The badge-pills are appearing stac ...

csshtmlbootstrap-4

What is causing the issue with Vue.js :class not functioning properly when it relies on a property of a list

Here is a snippet of my HTML code: <tr v-for="product in products" :class="{'bg-red': product.toWrite }" :key="product.name"> <td @click="setObjectToWrite(product.name)" class="show-hover&qu ...

javascriptvue.js

I am experiencing difficulty transitioning the view in React Native from a side position to an inward direction

Currently tackling a design project and encountering a roadblock in achieving a specific curved effect. Here are two images for reference: The Desired Design: My Current Progress: The basic structure is in place, but hitting a wall when attempting to cu ...

javascripthtmlcssreact-nativereact-navigation

Rendering HTML is not supported by AngularJS on Android 19 with version 4.4.4 and Safari 8.0.5

I have been working on an AngularJS app that is being displayed in a Webview on Android. Everything was functioning properly until yesterday when I started encountering issues with Angular not rendering the DOM correctly. I have tested the app on various v ...

javascriptandroidangularjsdomsafari

Is there a method in JS/jQuery to fill my input field with a constant string and ensure leading zeros are included?

I am looking to create an input textbox that starts with a fixed string followed by up to 6 leading zeros. As the user types in the input box, the leading zeros will be automatically removed once the maximum length of 6 characters is reached. The initial s ...

javascripthtmljquery

Discovering the precise location of the required() file

When using the require function in the `node` console with commands such as require('path') or require('assert'), how can I determine the absolute path of the file that was loaded? I have searched everywhere for a clear answer without ...

javascriptnode.jsrequire

The options in the drop-down menu appear to be stuck and remain in place

Can someone with expertise lend me a hand? I've been racking my brain over this issue, and while I feel like I'm on the right track, I just can't seem to make my sub-sub menu items drop down to the right on hover. I suspect there might be c ...

htmlcssdrop-down-menu

File writing issues are plaguing NodeJS, with middleware failing to function as well

I am facing a challenge with my middleware that is supposed to write JSON data to a file once the user is logged in. However, I am encountering an issue where no data is being written to the file or displayed on the console when the function is executed. ...

javascriptjsonnode.jsexpress

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

I am currently working on a webpage and attempting to incorporate JQuery into it for the first time. However, I seem to be encountering some issues that I believe might have simple solutions. Background Information My JQuery code only contains one event l ...

javascripthtmljquerycss

Difficulty encountered when creating step definitions - Implementing Cucumber and Appium using JavaScript

I am currently embarking on a project that serves as more of a proof of concept. For me, this is a POC since I am aware that similar projects have been executed before. My focus revolves around working with Cucumber.js, Appium Server/Client, Node, and Jav ...

javascriptnode.jscucumberappiumcucumberjs

Updating Property of a div in Vue.js

I have a Vue file and I am trying to specify an 'action' attribute for my form. <template> <div> <form> </form> </div> </template> export default { created() { var test = document.getElement ...

javascriptvue.jsattributes

Passing the contents of a datatable as parameters to a PHP script

I am facing a challenge with my datatable that has two columns, "Name" and "Age". After populating the datatable using Ajax, I create a button for each row. The goal is to send the "Name" and "Age" fields of the clicked row to a PHP script, which will then ...

javascriptphpajaxdatatable

Angular directive that utilizes a dynamic controller name and then interpolates the controller name

Can anyone assist me with passing controller definitions to the inner directive that is nested within the outer directive? You can refer to this link for an example that may or may not work. Is there a way for Angular to interpret what is being passed ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat