Как адаптировать сайт на bootstrap с каталогом товаров для мобильного устройства?

Question

[Сергей]

Имеется сайт с каталогом товаров. Для разметки использован boostrap 3.
В нормальном режиме каталог товаров показывается в левом столбце.
Как в мобильной версии сделать что бы этот каталог разворачивался на экран при нажатии по кнопке. (hamburger menu)
Я смотрел в строну navbar но не могу понять можно ли его использовать для этой цели. Он используется для горизонтального меню.
Или можно использовать navs.
Подскажите как это сделать ?

Comments

[Сергей Герасимов]

Посмотрите в сторону navbar-collapse или переход на Bootstrap 4

[Figment]

Сергей Герасимов, можно спросить, чем Bootstrap 4 тут поможет? Там есть доп. элемент/действие для этого?

[Сергей Герасимов]

Figment, он более универсален и обладает большими возможностями.
Что касается гамбургеров, которые вам нужны, то у Bootstrap 3 для этих целей есть только navbar-collapse, который схлопывается только лишь при 786px (по умолчанию, но можно кастомизировать через sass или с помощью кастомайзера на оф.сайте).

У Bootstrap 4 есть дополнительные классы для таких целей, которые даже выделены в отдельную группу getbootstrap.com/docs/4.1/components/collapse/, а также можно использовать navbar getbootstrap.com/docs/4.1/components/navbar/#exter... А также многие классы имеют responsive-модификаторы, отвечающие за применение/отмену тех или иных стилей.

[Сергей]

А есть еще варианты не использую bootstrap ?

[fedornabilkin]

Сергей, написать свой js, который будет отрабатывать события и разворачивать гамбургер. Только зачем, если это уже кто-то написал и протестировал?

[Сергей]

fedornabilkin, так вот и не могу найти подходящий написанный вариант.