Я создал загрузочную панель с фиксированным верхом 4, которая разворачивается на больших экранах и сворачивается на других.Я также добавил padding-top к <body>, чтобы предотвратить наложение навигационной панели содержимого основного тела.
Однако на меньших экранах, когда свернутая навигационная панель раскрывается с помощью кнопки гамбургера, она расширяется и заполняетэкран.Некоторые из навигационных ссылок становятся скрытыми (то есть за пределами дисплея).Кроме того, при прокрутке прокручивается не панель навигации, а только основное содержимое, находящееся под панелью навигации.
Можно ли сжимать панель навигации, чтобы она не занимала больше размера экрана?Или, как включить прокручиваемую панель навигации?
Добавлены фотографии ниже, чтобы показать проблему.
Вот снимок в мобильном представлении без расширения панели навигации: 
А вот несколько снимков, чтобы проиллюстрировать проблему, состоящую в том, что панель навигации занимает весь видовой экран и что все еще есть ссылки, но «за пределами» дисплея: 
Вот JSFiddle, если необходимо: https://jsfiddle.net/suhaib47/ef37ht06/6/
Редактировать:
После использования ответа, предоставленного @Zim, я столкнулся с другой проблемой,На экране рабочего стола панель навигации отображается правильно.Однако, когда я нажимаю на элементы nav-items / nav-links, которые открывают раскрывающийся список, раскрывающийся список остается в пределах панели навигации, и появляется полоса прокрутки для прокрутки панели навигации.Как сделать, чтобы раскрывающееся меню отображалось поверх содержимого панели навигации, в то же время его можно прокручивать, но только когда оно свернуто.
Я включил картинку, чтобы показать, что я имею в виду: 
Полоса прокрутки, показанная на рисунке, предназначена для панели навигации.