Меняем точку схлопывания меню Navbar Bootstrap 3

01.02.2018 | Написал

О чем сейчас пойдет речь? В bootstrap 3 главное меню адаптивно и при размере менее 768 px (xs) оно не показывается. Открытие происходит по нажатию на кнопку. Иногда меню такое большое, что на планшетном размере 768-991 px (sm) не влазит в отведеное для него место, и есть смысл сделать его также схлопнутым, как и на мобильном разрешении. Делаем это следующим образом:

В таблицу стилей добавляем стили:

@media (max-width: 991px) {
header .navbar-header {float: none;}
header .navbar-toggle {display: block;}
header .navbar-collapse {border-top: 1px solid transparent;box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);}
header .navbar-collapse.collapse {display: none!important;}
header .navbar-nav {float: none!important;margin:0;}
header .navbar-nav>li {float: none;display: block;}
header .navbar-nav>li>a {padding: 10px 18px;}
header .collapse.in{display:block !important;}
}

После этого при размере менее 992 px меню будет себя вести также, как и на мобильном.

Метки: , ,
Комментарии читателей статьи "Меняем точку схлопывания меню Navbar Bootstrap 3"

Нет комментариев.

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.