Исправлена ​​ошибка загрузки навигационной панели с разрешением 768 x 1024.

Question

Я загрузил шаблон начальной загрузки AZY с учетом 1 страницы и не смог установить фиксированную навигационную панель в верхней части экрана для разрешения 768 x 1024 (iPad - Portrait). Он по-прежнему фиксируется в верхней части для всех остальных от 240 х 320 до 1024 х 768.

Я создал скрипку: http://jsfiddle.net/B2sw6/

Я пытался использовать это, но это не сработало:

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

Если вы перетащите центральную разделительную панель на ок. 768px, вы увидите, что черный navbar прокручивается вместе с остальной частью страницы, вместо того, чтобы оставаться на месте наверху.

Есть ли какие-либо намеки на то, как обновить CSS, чтобы исправить это?

Answer 1

Вам нужно только сделать небольшое исправление. Добавьте position:fixed; в .navbar-fixed-top в медиа-файлах до 979px.

Изменить

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

с

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

Удачи.

Answer 2

есть медиа-запрос в CSS:

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

изменить его

position: fixed 

и он должен работать!