Исправлено перекрытие содержимого панели навигации в мобильном представлении. ⇐ Html

[Anonymous]

Я работаю над веб-сайтом ресторана. При просмотре на экране ноутбука панель навигации ведет себя должным образом. Однако, когда я просматриваю тот же веб-сайт с помощью Chrome DevTools в мобильном представлении, фиксированная панель навигации перекрывает основное содержимое страницы.
Макет на мобильном устройстве приводит к тому, что содержимое под панелью навигации исчезает под ним.
Вот соответствующий код:
HTML (index.html)
html

Код: Выделить всё

[*]

 Resturant 






[list]

[url=?page=home]HOME [/url]
[*][url=?page=menu]MENU [/url]
[*][url=?page=ourstory]OUR STORY  [/url]
[*][url=?page=contactus]CONTACT US [/url]

[*][url=call:+1....][i][/i][/url]
[*][url=instgram.com/example][i][/i][/url]
[*][url=mailto:example@example.com][i][/i][/url]
[/list]

CSS (style.css)

Код: Выделить всё

.navBar {
margin-bottom: 20px;
width: 100%;
height: auto;
position: fixed; /* 

Подробнее здесь: [url]https://stackoverflow.com/questions/79841470/fixed-navigation-bar-overlapping-content-in-mobile-view[/url]