Fixed the Bootstrap navigation bar with the 768x1024 view

advertisements

I downloaded the bootstrap AZY responsive 1 page template and cannot get the fixed navbar to stay at the top of the screen for 768 x 1024 (iPad - Portrait) resolution. It remains fixed at the top for all others from 240 x 320 to 1024 x 768.

I've created a fiddle: http://jsfiddle.net/B2sw6/

I tried using this but it didn't work:

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
}

If you drag the center divider bar across to approx. 768px width you will see the black navbar scrolls up with the rest of the page instead of remaining in place at the top.

Does anyone have any hints on how to update the CSS to correct this?


You only have to do only a small fix. Add position:fixed; to the .navbar-fixed-top in mediaqueries up to 979px.

Change

@media (max-width: 979px){
  .navbar-fixed-top {
  margin-bottom: 0px;
  }
}

with

@media screen and (max-width: 979px){
  .navbar-fixed-top {
    margin-bottom: 0px;
    position: fixed;
  }
}

Good luck.