I am building a responsive website using a modified 960 grid:

```
@media only screen and 
(min-width: 720px) and (max-width: 959px){

.container_12{
  margin-left: auto;
  margin-right: auto;
  width: 720px;
}
}

```

and a navigation bar that uses position:fixed to lock itself to the top of the page.

```
.nav-band{
    width: 100%;
    font-weight: bold;
    position: fixed;
    z-index: 3;
    overflow: hidden;
    background-image:url('../img/trans_black.png');
    padding: 2px;
}

```

This works fine in most cases, but it breaks on my android tablet. The page loads and works fine, but when I rotate the tablet (which changes all tags with .container\_12 from width:720px to width:480px) the nav bar either disappears or gets locked in an odd place, half way down the page. How can I fix this? The site also has an image that appears behind the nav bar within .header-band:

```
.header-band{
    background-image:url('../img/header_band3.png');
    background-repeat:repeat-x;
    background-position:top;
    height: 400px;
    background-color: #050505;
    position: fixed;
    z-index: 1;
}

<div class='pageband nav-band'>
<ul class='horizontal-list'>
<li class='nav-item active'>
<a href="http://...">Home</a>
</li>
...
</ul>
</div>
<div class='pageband header-band'>&nbsp;</div>
<div class='pageband core-band'>
<div class='pageband logo-band '>
<div class='container_12'>
...

```