@media queries and regular css interactions
<p>I have a page with a side panel that has a <code>position:fixed</code> on my page.
In the css, the following @media query to hide the panel if the screen width is below 1580px (which is most screens). </p>

<pre><code>@media screen and (max-width:1580px) {
  .sideSection {
    display: none;
  }
}
</code></pre>

<p>I have created a hidden checkbox and a label to click, to show the panel over the screen, using </p>

<pre><code>&lt;input type="checkbox" name="showSide" id="showSideSection"/&gt;
&lt;label for="showSideSection" id="sideSectionButton"&gt;Show Side Section&lt;/label&gt;
&lt;div class="sideSection"&gt;
[...]
</code></pre>

<p>and in the css :</p>

<pre><code>#showSideSection:checked + label + div {
  display: inline;
}
</code></pre>

<p>This works perfectly theoretically, but since the @media is dynamic, it will always hide the side panel. Is there a way to have the @media query check if <code>#showSideSection</code> is <code>:checked</code>; or any better way overall to have the panel show on screens with a width > 1580, and be replaced with a button which would show said panel when clicked on screens with a width &lt; 1580?</p>

<p>Edit : This is the css for the sideSection :</p>

<pre><code>.sideSection {
  position: fixed;
  right: 0;
  top: 180px;
  height:calc(100% - 180px);
  width: 230px;
  padding-top: 50px;
  padding-right: 20px;
  padding-left: 10px;
  background: #ededed;
  border-left: 5px solid #e33d3d;
}
</code></pre>