hide bootstrap dropdown with media query-CodePudding

I have a bootstrap dropdown that is only visible when the screen is a certain width. My issue is that when I resize the screen to hide the dropdown button, the previously clicked/opened dropdown menu remains open.

Is there a way to close the dropdown or get rid of the show class for the menu based on a media query? I've seen answers to similar questions, but none that helped me.

What CSS can I add to close the dropdown menu? As of now it stays open until unfocused, but I'd like it to close kind of like this sites dropdown.

.sm-screen-dropdown-menu {
  top: 48px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  border: none;
  border-radius: 0px;
  padding: 0;
  min-width: 200px;
}

@media (max-width: 600px) {
  .hide-sidebar {
    display: none !important;
  }
  .sm-screen-dropdown {
    display: flex;
    font-size: 20px;
    margin-right: 15px;
    margin-left: 10px;
    text-decoration: none;
  }
  .sm-screen-dropdown:hover {
    cursor: pointer;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div >
  <div  dropdown-toggle type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <i ></i>
  </div>
  
  <ul  aria-labelledby="dropdownMenuLink">
    <li>
      <a  href="/">Home</a>
    </li>
    <div ></div>
    <div >
      <li>
        <a  href="{% url 'home' %}">Groups</a>
      </li>
      <li>
        <a  href="{% url 'taglist' %}">Tags</a>
      </li>
    </div>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

CodePudding user response：

You're not running your code in any kind of snippet, which makes it difficult to get the full picture. However, I threw this together to show you how to hide/display elements based on media query in JS, not in CSS.

Run the snippet in full page, inspect and bring down the viewport width and you'll see the circle disappear when the viewport is less than 576px

You can also check out this Codepen

const smallDevice = window.matchMedia("(min-width: 576px)");
let circle = document.querySelector(".shape.circle");

smallDevice.addListener(handleDeviceChange);

function handleDeviceChange(e) {
  if (e.matches) circle.style.display = 'block';
  else circle.style.display = 'none';
}

//run it initially
handleDeviceChange(smallDevice);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.shape {
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
.shape   .shape {
  margin-top: 1rem;
}
.shape.box {
  background: blue;
}
.shape.circle {
  border-radius: 50%;
  background: red;
}

<div ></div>
<div  style="display: none;"></div>