Как адаптивно сверстать такое меню средствами Bootstrap?

Question

[Vyacheslav_Frein]

Как адаптивно сверстать такое меню средствами Bootstrap?
В гугле и доках нашёл только такой вариант - https://getbootstrap.com/docs/4.1/components/navbar/ , но он мне, видимо не подходит.

Comments

[Lord_Dantes]

Да зачем вам бутсрап...

Учитесь здесь нету же ничего сложного.

Обычный хедер в который вложен nav с пунктами меню и с absolute и отступом чуть ниже от своего родителя header и все.

[Vyacheslav_Frein]

s l a v e, это понятно. Вопрос в том, как сверстать это бутстрапом, и вообще возможно ли это им сделать?

[Lord_Dantes]

Vyacheslav_Frein, не знаю получится давно от него отказался еще с 3 версии и перешёл на флексы. Думаю возможно но гемор будет с переопределением стилей. Если вас заставляют то моргните.

[Vyacheslav_Frein]

*моргнул*

[keria32]

Vyacheslav_Frein, сделать возможно семантику на бутстрап, но всё же стили самому придётся менять, чтобы меню выглядело как вы хотите.

Answer 1

[keria32]

Если вам нужно сверстать такое же меню и вы хотите использовать bootstrap, то на нём можно сверстать структуру меню как в вашем примере, но потом уже в стилях придётся самому изменить дизайн и внешнее оформление.

Answer 2

[Игорь]

Меню вы имеете ввиду желтое? или всю шапку? Если желтое, то вам не нужен компонент NavBar, вам нужен компонент Navs

Answer 3

[Арсений Матыцин]

Первое, что следует взять во внимание, navbar яндекс это просто условно готовая база, которая подойдет для большинства решений, но в момент, когда ты упираешься в дизайн, то он [navbar] работать перестает. К слову, в последней версии вроде прямо готовый модуль убрали и заменили на компоновку.

Дальше, принять тот факт, что тебе придется описывать шапку на 90% самому.

Структурно же у тебя все вписывается в сетку и логику:
container-fluid
→container (верхняя часть шапки)
→container + отрицательный margin или transform для желтой навигации и к ней тебе с наибольшей вероятностью удобно будет использовать flex + justfy-content: space-between.

А про адаптивность говорить нельзя пока у тебя не руках нет макета для мобилок. Но как результат тебе все равно придется описывать самостоятельно, чтобы вписаться в дизайн. Либо по макету, либо брать на себя ответственность за мобильное решение.

PS: в идеале решение должно быть mobile-first (так проще).