const toggle = document.getElementById('toggle');
window.onclick = function (event) {
  if (event.target == toggle) {
     toggle.checked = false;
  }
};
.navbar {
  background-color: #5f686d;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100vw;
  z-index: 2;
  top: 0;
}


.navbar .desktop {
  list-style-type: none;
  padding: 0;
  display: flex;
  margin-left: auto;
  margin-top: 10px;
  margin-right: 1rem;
  margin-bottom: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-transform: capitalize;
}
#logo {
  width: 150px;
  height: 50px;
  margin-top: 15px;
  margin-right: 30vw;
  margin-left: 2vw;
}
.navbar li img{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0px;

}

/* Dropdown Button */
.dropbtn {
  background-color: #5f686d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  border: 1px solid #95bbdf;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

.navbar ul li i{
  font-size: 2rem;
  margin-right: 2rem;
}
.navbar ul li div{
  padding: 0px !important;
}
.navbar .fa-sort-down{
  font-size: 1.5rem;
  color: whitesmoke;
}
.navbar ul li ,
.navbar ul li div{
  padding: 10px;
  color: whitesmoke;
  margin: auto;
  cursor: pointer;
  
}
.navbar ul li div:hover{
  border: none;
  text-decoration: none;
}
.navbar ul li a {
  text-decoration: none;
  color: white;
  border-bottom: 2px solid transparent;
}

.navbar ul li a:hover {
  color: #ea4c88;
  transition: 200ms ease;
}

.navbar label {
  font-size: 40px;
  color: whitesmoke;
  line-height: 70px;
  display: flex;
  flex-direction: row;
  display: none;
  justify-content: flex-end;
}
.navbar #toggle {
  display: none;
}

ol {
  display: none !important;
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
  border-top: none;
}
ol a{
  color: black;
}
ol li:hover a{
  color: white;
}
ol li:hover{
  background-color: rgb(107, 103, 103);
}
/*navbar media*/

@media screen and (max-width: 1031px) {
  .navbar {
    align-items: center;
    justify-content: center;
  }
  .navbar ul {
    margin-right: auto;
    margin-left: auto;
    justify-content: space-between;
  }
  #logo {
    margin: auto;
    padding-left: 1.5rem;
  }
  .prof_name{
    display: none;
  }

}
@media screen and (max-width: 630px) {
  .navbar {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
  }
  .navbar {
    align-items: flex-start;
    justify-content: flex-start;
  }

  #logo {
    margin: 0.5rem;
  }
  .navbar .desktop{
    display: none !important;
  }
  .navbar ol {
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
  }
  .navbar ol li {
    display: flex;
    justify-content: center;
    font-size: 1.3em;
    margin: 0;
  }
  .navbar label {
    align-self: flex-end;
    margin-right: 10px;
    display: flex;
    cursor: pointer;
    color: white;
    width: 40px;
    position: fixed;
  }

  #toggle[type=checkbox]:checked ~ ol {
    display: block !important;
  }
  .prof_name{
    display: none;
  }
}
    <nav class="navbar">
            <a href="#"><img id="logo"src="../assets/images/logo.png" alt="logo"></a>
            <label for="toggle"> &#9776; </label>
            <input type="checkbox" id="toggle">
            <ul class="desktop">
              <li> <a href="accounts.html"> <i class="fas fa-home" title="Home"></i></a></li>
              <li onclick="toggleDropdown()">
                <img src="../assets/images/avatar-1577909__340.png" alt="img_you">
            </li>
            <div class="dropdown">
                    <button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
                    <div class="dropdown-content">
                            <a href="#" onclick="toggleCreateAccoutn('create_account_modal_')">Create User</a>
                            <a href="../index.html"> Log out</a>
                            <a href="../USER/profile.html">User</a>
                            <a href="../STAFF/accounts.html">Staff</a>
                    </div>
            </div>
            </ul>
            <ol>                                                                                                   
                    <li>
                        <a href="accounts.html">Home</a>
                    </li>
                    <li><a href="#" onclick="toggleCreateAccoutn('create_account_modal_')">Create User</a></li>
                   <li> <a href="../index.html"> Log out</a></li>
                    <li><a href="../USER/profile.html">User</a></li>
                    <li> <a href="../STAFF/accounts.html">Staff</a></li>
                </ol>
          </nav

I'm using a checkbox to show and hide hamburger navbar on mobile view. I'm trying to make sure that when ever a user clicks anywhere on the screen when the navbar is opened, the checkbox should get checked and navbar should hide. But instead the navbar won't even open,I found out windows.onclick triggers immediately i try to open the navbar.

1 Answers

1
zer00ne On Best Solutions

Try document instead of window. There wasn't any code to hide .navbar and the use of event.target doesn't look like it was needed. event.target references the element that the user clicked which in this situation can be considered anything.

document.onclick = function(event) {
  const tog = document.getElementById('toggle');
  const nav = document.querySelector('.navbar');
  tog.checked = true;
  nav.style.display = 'none';
};
.navbar {
  background-color: #5f686d;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100vw;
  z-index: 2;
  top: 0;
}

.navbar .desktop {
  list-style-type: none;
  padding: 0;
  display: flex;
  margin-left: auto;
  margin-top: 10px;
  margin-right: 1rem;
  margin-bottom: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-transform: capitalize;
}

#logo {
  width: 150px;
  height: 50px;
  margin-top: 15px;
  margin-right: 30vw;
  margin-left: 2vw;
}

.navbar li img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0px;
}


/* Dropdown Button */

.dropbtn {
  background-color: #5f686d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  border: 1px solid #95bbdf;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

.navbar ul li i {
  font-size: 2rem;
  margin-right: 2rem;
}

.navbar ul li div {
  padding: 0px !important;
}

.navbar .fa-sort-down {
  font-size: 1.5rem;
  color: whitesmoke;
}

.navbar ul li,
.navbar ul li div {
  padding: 10px;
  color: whitesmoke;
  margin: auto;
  cursor: pointer;
}

.navbar ul li div:hover {
  border: none;
  text-decoration: none;
}

.navbar ul li a {
  text-decoration: none;
  color: white;
  border-bottom: 2px solid transparent;
}

.navbar ul li a:hover {
  color: #ea4c88;
  transition: 200ms ease;
}

.navbar label {
  font-size: 40px;
  color: whitesmoke;
  line-height: 70px;
  display: flex;
  flex-direction: row;
  display: none;
  justify-content: flex-end;
}

.navbar #toggle {
  display: none;
}

ol {
  display: none !important;
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
  border-top: none;
}

ol a {
  color: black;
}

ol li:hover a {
  color: white;
}

ol li:hover {
  background-color: rgb(107, 103, 103);
}


/*navbar media*/

@media screen and (max-width: 1031px) {
  .navbar {
    align-items: center;
    justify-content: center;
  }
  .navbar ul {
    margin-right: auto;
    margin-left: auto;
    justify-content: space-between;
  }
  #logo {
    margin: auto;
    padding-left: 1.5rem;
  }
  .prof_name {
    display: none;
  }
}

@media screen and (max-width: 630px) {
  .navbar {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
  }
  .navbar {
    align-items: flex-start;
    justify-content: flex-start;
  }
  #logo {
    margin: 0.5rem;
  }
  .navbar .desktop {
    display: none !important;
  }
  .navbar ol {
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
  }
  .navbar ol li {
    display: flex;
    justify-content: center;
    font-size: 1.3em;
    margin: 0;
  }
  .navbar label {
    align-self: flex-end;
    margin-right: 10px;
    display: flex;
    cursor: pointer;
    color: white;
    width: 40px;
    position: fixed;
  }
  #toggle[type=checkbox]:checked~ol {
    display: block !important;
  }
  .prof_name {
    display: none;
  }
}
<nav class="navbar">
  <a href="#"><img id="logo" src="../assets/images/logo.png" alt="logo"></a>
  <label for="toggle"> &#9776; </label>
  <input type="checkbox" id="toggle">
  <ul class="desktop">
    <li>
      <a href="accounts.html"> <i class="fas fa-home" title="Home"></i></a>
    </li>
    <li onclick="toggleDropdown()">
      <img src="../assets/images/avatar-1577909__340.png" alt="img_you">
    </li>
    <div class="dropdown">
      <button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
      <div class="dropdown-content">
        <a href="#" onclick="toggleCreateAccoutn('create_account_modal_')">Create User</a>
        <a href="../index.html"> Log out</a>
        <a href="../USER/profile.html">User</a>
        <a href="../STAFF/accounts.html">Staff</a>
      </div>
    </div>
  </ul>
  <ol>
    <li>
      <a href="accounts.html">Home</a>
    </li>
    <li><a href="#" onclick="toggleCreateAccoutn('create_account_modal_')">Create User</a></li>
    <li> <a href="../index.html"> Log out</a></li>
    <li><a href="../USER/profile.html">User</a></li>
    <li> <a href="../STAFF/accounts.html">Staff</a></li>
  </ol>
</nav>