An explanation of the problem I'm working is in this pen
There's no relevant code to post here.
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.
Add height to the navbar in percent, like this:
.navbar{
display: flex;
justify-content: center;
align-items: center;
background: DodgerBlue;
position: fixed;
top: 20px;
left: 5%;
width: 90%;
height: 15%;
}
Complete example
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
body {
font-size: 26px;
}
.navBar {
position: fixed;
top: 1%;
left: 3%;
right: 3%;
height: 5%;
background-color: greenyellow;
font-size: 100%;
}
.content {
width: 600px;
margin: 100px auto 100px auto;
text-align: justify;
}
</style>
</head>
<body>
<div class="navBar"></div>
<div class="content">
<p>I'm baby snackwave ugh williamsburg raclette lomo put a bird on it synth tousled cornhole taiyaki chartreuse stumptown aesthetic VHS. Bicycle rights af cardigan tilde vice DIY. Kinfolk banh mi bushwick aesthetic narwhal cornhole helvetica swag shoreditch venmo small batch pour-over. Distillery meh plaid lyft enamel pin jianbing banh mi tote bag seitan palo santo migas green juice offal viral. Shaman offal woke, actually health goth tousled franzen tacos before they sold out.</p>
<p>Cronut lyft offal yuccie next level pabst mustache selfies. Woke ugh tote bag everyday carry hoodie synth. Keffiyeh stumptown offal, taiyaki kinfolk chillwave dreamcatcher single-origin coffee. Meggings snackwave bicycle rights, authentic butcher tilde art party man braid hell of. Wolf disrupt everyday carry vice, viral tofu knausgaard squid etsy celiac shoreditch edison bulb. Cray locavore mustache plaid pork belly blog dreamcatcher godard mixtape. Jean shorts heirloom biodiesel butcher blog vice, crucifix gastropub authentic bitters meh intelligentsia dreamcatcher.</p>
<p>I'm baby snackwave ugh williamsburg raclette lomo put a bird on it synth tousled cornhole taiyaki chartreuse stumptown aesthetic VHS. Bicycle rights af cardigan tilde vice DIY. Kinfolk banh mi bushwick aesthetic narwhal cornhole helvetica swag shoreditch venmo small batch pour-over. Distillery meh plaid lyft enamel pin jianbing banh mi tote bag seitan palo santo migas green juice offal viral. Shaman offal woke, actually health goth tousled franzen tacos before they sold out.</p>
<p>Cronut lyft offal yuccie next level pabst mustache selfies. Woke ugh tote bag everyday carry hoodie synth. Keffiyeh stumptown offal, taiyaki kinfolk chillwave dreamcatcher single-origin coffee. Meggings snackwave bicycle rights, authentic butcher tilde art party man braid hell of. Wolf disrupt everyday carry vice, viral tofu knausgaard squid etsy celiac shoreditch edison bulb. Cray locavore mustache plaid pork belly blog dreamcatcher godard mixtape. Jean shorts heirloom biodiesel butcher blog vice, crucifix gastropub authentic bitters meh intelligentsia dreamcatcher.</p>
</div>
</body>
</html>