Расхождение в отзывчивом меню в CSS Bootstrap
Я занимаюсь разработкой сайта для местной юридической фирмы и столкнулся со странной проблемой CSS.
Свернутое отзывчивое меню отображается двумя разными способами. Используя Screenfly от Quirktools, я заметил, что у двух устройств есть проблемы с меню CSS.
Первый и правильный путь найден здесь
ЭТО БЫЛО ИСПРАВЛЕНО
Эта ссылка для устройств с разрешением экрана 603px x 966px.
Второй и неправильный способ найден здесь
ЭТО БЫЛО ИСПРАВЛЕНО
ЭТО БЫЛО ИСПРАВЛЕНО
Первая ссылка предназначена для устройств с разрешением экрана 800px x 1280px
Второе предназначено для устройств с разрешением экрана 768px x 1024px
Следующий размер до 10 «нетбука тоже подойдет и его можно найти здесь
ЭТО БЫЛО ИСПРАВЛЕНО
Этот предназначен для устройств с разрешением экрана 1024px x 600px
Сайт в вопросе
ЭТО БЫЛО ИСПРАВЛЕНО
Кто-нибудь знает, что может вызвать это или как это исправить?
Любая помощь будет принята с благодарностью. Я не работал с Bootstrap раньше, и это может немного сбить с толку.
Лучший,
Тим
Решение
У тебя есть float:right на .header-contact вы макет ломается в 650px
Так что добавьте этот медиа-запрос
@media (max-width: 650px) {
.header-contact{
float:left;
}
}
Следующий дизайн навигационной панели ломается, потому что вы переключаете свой nav-bar at 818px и цвет, примененный к навигационной панели, по этому запросу.
@media (max-width: 767px) {
.menu-nav ul {border:none;}
.navbar-collapse{background:#353f00;}
}
Так что-нибудь экран выше 767px будет проблема до 818px,
Измените запрос на 818px
@media (max-width: 818px) {
.menu-nav ul {border:none;}
.navbar-collapse{background:#353f00;}
}
Другие решения
Других решений пока нет …