Как стандартый примере botstrap navbar изменить так, чтоб пункты меню сворачивались на 920px, а не на 768px?

Question

[Nick Bukovskiy]

Здравствуйте. Если взять стандартный navbar с официального сайта там установлены настройки так, чтоб при уменьшении экрана к 768px меню сворачивалось в кнопку. Как изменить значение 768px на 920px?

Answer 1

[Дмитрий Крымцев]

Воспользуйтесь media + selector.

Comments

[Nick Bukovskiy]

Извините, но не до конца понял. Я в отдельном css прописываю @media(min-width:920px){selector} . А дальше что?

[Дмитрий Крымцев]

Никита Буковский: и дальше при нужном расширении у пункты меню должны сворачиваться как в заголовке этой темы

[Nick Bukovskiy]

Дмитрий Крымцев: не получается так(
Если вам не трудно - можете привести какой то пример или как то расписать подробнее. Спасибо

[Дмитрий Крымцев]

Никита Буковский: дайте ссылку на ваш сайт

[Nick Bukovskiy]

Дмитрий Крымцев: это не сайт, я просто эксперементирую с bootstrap, чтоб разобраться в нём. Я взял код с официального сайта. Взял верхнюю навигацию. Добавил картинку, убрал поиск и добавил пару пунктов меню. Теперь при уменьшении экрана на 900px пункты съезжают вниз, а сворачивание в кнопку проходит на 768px. Вот я и хотел сделать так, чтоб сворачивание в кнопку происходило раньше.

[Дмитрий Крымцев]

Никита Буковский: а вы заставили поломать голову, в теории я знаю как это сделать, но вот подогнать под это код, не трогая стандарты у меня чего-то не получается.

там получается что не просто кнопка появляется, а весь блок перестраивается при достижении 768px. и надо править

media (min-width: 920px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}

media (min-width: 920px) {
.navbar-toggle {
display: none;
}
}

[Nick Bukovskiy]

Дмитрий Крымцев: самое грустное, что у меня не работает((

[Nick Bukovskiy]

Дмитрий Крымцев: наверное, придётся править media в самом файле bootstrap

Answer 2

[Алексей]

Если используется чистый Bootstrap, то bootstrap-3.ru/customize.php, раздел Медиа запросы точки прерывания, правишь на то, что тебе нужно. Потом вниз и кнопка Компилировать и скачать

Comments

[Nick Bukovskiy]

а можно ли изменить только для текущей задачи, но оставить 768px для sm. Чтоб в потом доделывать для планшетов и телефонов

[Алексей]

Дмитрий Крымцев Правильно написал. В таком случае ничего лучше не придумать

[Дмитрий Крымцев]

Никита Буковский: указываете

@media(min-width:920px){selector}

selector можете скопировать через shift+ctrl+c -> нужный вам объект в коде (в вашем случае кнопка) -> Copy -> Copy selector