Задать вопрос

Как в Bootstrap сделать такое меню?

вот пример:
ac16a9808d174da3bafb94a2cfae45ca.JPG
проблема в том, что картинка растягивает row, где находятся пункты меню:
c50ed410a9a44efb87bef01c098c2f02.JPG
Не хочется делать костыли, нужно, чтобы на моб. устройствах лого потом скрывалось, но это я сам попробую...
css bootstrap особо не редактировал. Если нужна еще какая-то инфа - предоставлю.
<div class="container">
    <div class="row">
        <div class="col-lg-2">
            <img src="img/logo.png">
        </div>
        <div class="col-lg-10  higer">
                <div class="navbar-header">
                    <!-- Кнопка для меню при масштабировании -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsiv-menu"> 
                        <span class="sr-only">Открыть навигацию</span>
                        <span class="icon-bar"> </span>
                        <span class="icon-bar"> </span>
                        <span class="icon-bar"> </span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="responsiv-menu">
                    <ul class="nav navbar-nav">
                        <li><a class="" href="#">Пункт меню 1</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Пункт меню 2<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a class="" href="#">первый </a></li>
                                <li><a class="" href="#">Второй</a></li>
                                <li><a class="" href="#">Третий</a></li>
                                <li class="divider"></li>
                                <li><a class="" href="#">первый </a></li>
                                <li><a class="" href="#">Второй</a></li>
                                <li><a class="" href="#">Третий</a></li>
                            </ul>
                        </li>
                        <li><a class="" href="#">Пункт меню 3</a></li>
                    </ul>
                </div>
        </div>
    </div>                
</div>
  • Вопрос задан
  • 716 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
qork
@qork
{ background: #F00B42 }
Абсолютное позиционирование логотипа поможет?
codepen.io/anon/pen/wKVoGE
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы