Меню на основе Bootstrap?

Question

[bulkmaker]

Хочу сделать меню как в этом примере https://stroy.aspro-demo.ru/
В зависимости от размера экрана - видно несколько пунктов меню. В полном разрешении 8 пунктов. На 1024px 6 пунктов?а остальные свёрнуты в кнопку. На 768px уже 4 элемента, остальное свёрнуто. Ну и на мобильных разрешениях привычное меню для телефонов.
Можно ли как то сделать тоже самое на основе стандартного bootstrap меню.
Можно и без бутстрапа в принципе, но главное чтобы он вписывался туда

Answer 1

[Максим]

getbootstrap.com/components/. Тут нету ?

Answer 2

[lacrim]

В бутстрапе по умолчанию нет такого функционала.

Вот тут можно подсмотреть пример реализации с JS -codepen.io/kartofelek007/pen/wMQBgm

Можно и на медиа выражениях велосипед запилить, например:

скрываем 8й пункт

@media screen and (min-width: 1024px) {
   li:nth-child(8) {display:none;}
}

скрывем 7й и 8й

@media screen and (min-width: 768px) {
   li:nth-child(7),
   li:nth-child(6) {display:none;}
}

ну и так далее.

Comments

[bulkmaker]

я так себе и представлял сначала, но как тогда эти элементы добавить в сворачиваемое меню ?

[lacrim]

bulkmaker: выше есть ссылка на реализацию. Что бы прятать в выпадающее меню нужно ещё js подключать в дело. Суть в том, что бы на ключевых точках переносить ссылку из одного массива в другой.