Имейте фиксированную навигационную панель, но все еще сохраняйте прокрутку активной.

Question

. Моя проблема в том, что у меня установлена ​​фиксированная навигация, поэтому она следует за окном и находится в верхней части страницы, где бы они ни находились, но когда страница ширина уменьшается, остальные элементы навигационной панели обрезаются, и я не могу прокрутить, чтобы увидеть остальные элементы. У меня уже есть минимальная ширина, поэтому она останавливается в определенной точке. Поэтому, когда ширина страницы снижается, я хочу, чтобы у пользователя была возможность прокручивать страницу и быть в состоянии видеть остальную часть навигационной панели, а не только ту часть, которая подходит для этой страницы. Вот что я имею в виду (см. Nav-bar): http://gyazo.com/513ad98520c9821c1de640b8c1d28fdd

Вы видите, как я не могу прокрутить, чтобы увидеть остальные элементы навигационной панели при уменьшении ширины? Когда у меня нет установленного nav-bar, он работает отлично (но мне нужно, чтобы он следовал за верхней частью страницы, почему он исправлен).

Вот некоторые из моего NavBar CSS:

nav{ 
    min-width: 900px; 
    position: fixed; 
    background-color:white; 
    width: 100%; 
} 

nav img{ 
    display: block; 
    margin: 0 auto; 
    width: 25%; 
    padding-top:5px; 
    padding-bottom: 15px; 
} 

nav li{ 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    display: inline-block; 
    padding: 10px 50px 0px 10px; 
} 
nav a{ 
    color: white; 
    text-decoration: none; 
} 
nav ul{ 
    margin: 0; 
    height: 30px; 
    background-color: black; 
} 

А вот полный веб-страница (Да, я знаю, что нужно сделать изображение меньше.) http://cydronixweb.kkhorram.info/

Answer 1

Это простое исправление:

Добавить min-width: 100%; в body

Это только гарантирует, что вы не получите странную прокрутку.

Answer 2

Строго гипотетически говоря, вы сначала начинаете с медиа-запроса. что-то вроде:

@media only screen and (max-width : 768px) { 

    } 

Теперь в запросе медиа изменить некоторые стили, как:

@media screen and (max-width : 768px){ 
    /*Make dropdown links appear inline*/ 
    ul { 
     position: static; 
     display: none; 
    } 
    /*Create vertical spacing*/ 
    li { 
     margin-bottom: 1px; 
    } 
    /*Make all menu links full width*/ 
    ul li, li a { 
     width: 100%; 
    } 
    /*Display 'show menu' link*/ 
    .show-menu { 
     display:block; 
    } 
} 

, так как вы помечено постановка вопроса только HTML и CSS.

here's лучший ресурс в Интернете для создания только CSS, полностью отзывчивого меню.

спасибо.

Alexander.