Intereting Posts

Создание двойного навигационного бутстрапа, только 2-й рядный складной

Я хочу создать двойную навигационную панель (две строки) с помощью Bootstrap.

Шаблон navbar действительно не соответствует моим целям дизайна, которые выглядят примерно так: (эта демонстрация)

+-------------+--------------------------------+ | title | | this part does not collapse +-------------+--------------------------------+ | two-line | two-line | | on smaller screens, | button | button | | collapses to 'hamburger' menu +----------------------------------------------+ 

Мне трудно свернуть второй ряд в меню гамбургера.

Мой код: (сделал это вручную, чтобы добиться внешнего вида, как указано выше)

  (1 cell for title, 1 cell for rest of row) 
(...)

Я бы заменил всю контейнерную жидкость навигационной панелью, но тогда я не смог бы достичь дизайна, связанного в: (demo) . Я попытался настроить параметры CSS, но не смог получить внешний вид и точные измерения.

Любой способ сделать вторую строку сворачиваемой на мобильном, ручном или ином, сохраняя при этом дизайн?

Вот немного другая идея. Мне нравится вторая навигационная панель Macsupport от вашего оригинального дизайна, но кнопка переключения во второй строке на мобильном устройстве не имеет для меня большого смысла. Особенно на мобильных телефонах, где пространство ограничено. Наличие кнопки гамбургера на крайнем правом уровне вовсе не умаляет логотип.

Вот довольно стандартный пример навигации, за исключением того, что я добавил class .twoRow

  

Для CSS на широкоэкранном устройстве просто очистите .navbar-collapse чтобы он создавал новую строку:

 @media (min-width: 768px) { .twoRow .navbar-collapse { clear: left; } } 

Рабочая демонстрация в jsFiddle

Это будет выглядеть так:

Скриншот

Вот пример :

 /* CSS */ .nav2 { margin-top: 50px; }