Fixed Bootstrap navbar disappearing with 768 x 1024 view

Question

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?

score 1 · Accepted Answer · edited May 05 '15 at 15:20

1

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.

edited May 05 '15 at 15:20

user784756

2,363
4
28
44

answered Apr 05 '13 at 17:11

Akshaya Raghuvanshi

2,237
22
21

score 0 · Answer 2 · answered Apr 05 '13 at 07:26

0

there is a media query in the css:

@media (max-width: 979px)
.navbar-fixed-top, .navbar-fixed-bottom {
position: static;
}

change it to

position: fixed

and it should work!

answered Apr 05 '13 at 07:26

makkus

383
4
11

Fixed Bootstrap navbar disappearing with 768 x 1024 view

2 Answers2

Linked