I'm attempting to use CSS to hide a Div, but unfortunately, my attempts have been unsuccessful.
This is the code I have been working on:
Here is my VUE code:
<div class="scroll-wrapper scrollbar-outer" style="position: relative;">
<div id="menu-mobile-cats" class="scrollbar-outer scroll-content scroll-scrolly_visible">
<div class="panel-group" id="accordion-mbl-menu">
<!-- ===Menu Desktop=== -->
<div id="app" class="large">
<b-button v-b-toggle.collapse-1 class="ButtonsMenu">Accessories</b-button>
<b-collapse id="collapse-1" class="mt-2">
<ul class="customHorizontalList">
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</b-collapse>
</div>
<!-- ===End Menu Desktop=== -->
...
...
Here is my CSS code:
@media (min-width: 829px) {
.large {
display: block;
}
.navbar-greetings, .login-section{display: none}
#menu-header.collapse:not(.show){
display: block;
}
#menu-header{
position: fixed;
top: 25px;
max-width: 83%;
margin: 0 auto;
left: 8.32%;
.panel{
top: 50px;
display: fixed;
flex-direction: row;
button{
display: block;
color: white;
font-size: 13px;
font-family: 'VWHead-Bold';
}
}
#accordion-mbl-menu{
display: flex;
}
}
}
I have tried searching online for a solution, but so far, I have not been able to find one. I am unsure what I am doing incorrectly.