khan khan - 2 months ago 10
CSS Question

Zooms in obscure the whole screen

My website has a header and when a user zooms in on my website, its header will also zoom in and potentially obscure the whole screen.
All other things are working well. My css code is:

#header {
position: fixed;
height: auto;
width: 100%;
z-index: 100
}
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
sidebar {
width: 190px;
position: fixed;
margin-left: 410px;
}
footer { background-color:Black; color: #fff; text-align: center; position:absolute; width:100%; }

Answer

You can do with this:

#header {
  position: fixed
}

@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
  #header {
    position: static
  }
}