title: Stop one element from scaling proportionally with browser zoom?
body: <p>An explanation of the problem I'm working is in this <a href="https://codepen.io/kslaton/pen/qBaxaPq" rel="nofollow noreferrer">pen</a></p>
  <p><code>There's no relevant code to post here.</code></p>
  <p>The site I'm working on has a fixed navbar that floats a little bit from the top of the page, as modeled in the pen. We are getting some WCAG-related complaints that when the page is scaled to 200% zoom, the navbar obscures too much of the page. I'm trying to figure out how to fix the height and the top of the navbar so that they DON'T scale proportionally to the rest of the page when the browser zooms. I'm fine with the elements, text, etc. within the navbar scaling with the rest of the page, I just want the height and top to stay the same so it doesn't obscure the rest of the page. Can someone point me down the right road to get started on this? I expect it'll involve some JS I just haven't been able to find any reliable information on browser zooming.</p>