bootstrap выпадающий список гамбургеров navbar отлично работает на рабочем столе (все разрешения), но не на мобильном устройстве

Question

Мои bootstrap и css нормально работают в настольном браузере, но когда я go захожу на сайт через мобильный телефон, возникают две проблемы: панель навигации не такая широкая, как переключатель гамбургера и изображение (независимо от изменение размера изображения), и выпадающее меню гамбургера не выводит содержимое страницы sh - оно накладывается на содержимое - это может быть хорошо, но мне, по крайней мере, нужно исправить ширину панели навигации.

Любая помощь очень ценится

HTML

Навбар, связанный CSS

.navbar-fixed-top {height: 40x;} 
.navbar-brand img {height: 40px;}


.navbar-dark{
    background-color: #1a2125;
} 

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

Answer 1

Размер навигационной панели может измениться, если у нее нет определенного свойства ширины. Я просмотрел весь ваш код, и он не выглядит так, как будто ваша панель навигации имеет заданную ширину в вашем css или в вашем javascript / jquery / et c. Тег <nav> также является элементом уровня блока, что означает, что он будет занимать все пространство новой строки. Если вы хотите изменить ширину более легко, вы можете изменить ее на элемент inline-block в css или использовать настройки полей и отступов. Еще одна ошибка, которую я поймал, заключается в том, что в вашем css в верхней части фрагмента вы набрали 40x вместо 40px (не уверен, что вы его поймали). Если вы внимательно прочитаете свой код, вы можете или не можете найти другие ошибки.