Как заставить меню гамбургера в Bootstrap на планшетах шириной 991 пикселей?

Question

На веб-сайте https://weightlosspillsreviews.com У меня проблема при отображении на планшетных устройствах с разрешением 991 пикселей или меньше в ширине области просмотра. Проблема в том, что пункты меню получают разрывы строк в этой точке останова окна просмотра, и я хочу переключиться на меню гамбургеров в этой точке останова.

Когда я попытался переопределить bootstrap. css, для которого установлена ​​точка останова до 767px, поместив связанные медиазапросы в мой стиль. css файл и установив их в 991px, все верхнее навигационное меню исчезает, а не переключается на меню гамбургеров.

Вот стили, которые я вставил в style. css и скорректированы:

@media (max-width: 991px) {
    .hidden-xs {
        display: none!important;
    }
    .navbar .navbar-inverse .visible-xs {
        display: block!important;
    }
}

Но когда этот код присутствует, все меню исчезает.

Что мне здесь не хватает?

Answer 1

В вашем случае на сайте используется bootstrap 3.3.7. В более поздних версиях bootstrap это может быть просто обновлено только классом. Вы можете go пойти по этому пути обновления версии bootstrap, если хотите.

Более быстрое решение - загрузка настроенного стиля bootstrap. Go по этой ссылке, чтобы настроить CSS: https://getbootstrap.com/docs/3.4/customize/

В разделе Grid System обновите @ grid-float-breakpoint до ширины, которую вы хочу, чтобы навбар рухнул.