hide bootstrap dropdown with media query - css

Question

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/bootstrap#5.2.0/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 class="dropdown center">
<div class="sm-screen-dropdown" dropdown-toggle type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bars menu-icon"></i>
</div>
<ul class="dropdown-menu sm-screen-dropdown-menu" aria-labelledby="dropdownMenuLink">
<li>
<a class="dropdown-item" href="/">Home</a>
</li>
<div class="dropdown-divider no-margin"></div>
<div class="ms-2">
<li>
<a class="dropdown-item" href="{% url 'home' %}">Groups</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'taglist' %}">Tags</a>
</li>
</div>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Answer 1

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 class="shape box"></div>
<div class="shape circle" style="display: none;"></div>