Проблема при изменении размера верхней панели навигации на мобильном телефоне

Question

Я построил это очень простое site для работы, и я обнаружил проблему, связанную с верхней панелью навигации при изменении размера на мобильном телефоне (обратите внимание, что мобильной версии сайта и не будет) ,

При изменении размера на мобильных экранах панель навигации остается фиксированной, а содержимое можно перемещать. Это означает, что, хотя навигационная панель остается застрявшей в верхнем левом углу и частично блокирует экран, текст свободно перемещается под нее. Пожалуйста, обратитесь к скриншотам ниже:

Mobile: Example 1

Если проверить исходный код, верхняя панель навигации установлена ​​фиксированные. Если я удалю эту строку, изменение размера на мобильном устройстве прекратится, но верхнее поле, указанное для содержимого (так, чтобы оно не перекрывалось с навигационной панелью), становится огромным.

Изменение этого запаса, однако, влияет на панель навигации при изменении размера окна на компьютере, как вы можете увидеть ниже:

Desktop: Example 1

Прошло много лет с тех пор я в последний раз работал с HTML и CSS, поэтому, пожалуйста, извините меня, если я пропущу очевидное.

Как я могу найти решение?

Answer 1

Это происходит потому, что вы дали ширину и не более ширины 100% к началу класса, если вы хотите, чтобы исправить это в мобильных устройствах вы должны написать вопрос СМИ

---

Try ниже кода в CSS

---

@media (max-width: 500px){ 
div.top{ 
    width: auto; 
    max-width: none; 
}} 

Answer 2

, если вы хотите, чтобы показать навигацию в мобильном режиме, то используйте ниже код.

---

@media (max-width: 500px){ 
div.top{ 
    position: relative; 
} 
div.normal{ 
    margin-top:200px; 
} 
ul.menu li{ 
    float: none; 
}}