1

Доверстываю шаблон, нужно чтобы меню при любом, даже самом малом разрешении, оставалось неизменной

А сейчас она на мелких экранах просто исчезает, как убрать этот эффект?

    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <a class="navbar-brand" href="index.html">Myevent</a>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">События</a></li>
                        <li><a href="groups.html">Группы</a></li>
                        <li><a href="feed.html">Лента</a></li>
                        <li><a href="notifications.html">Оповещения</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                                <img src="images/german.png">
                                Герман <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Профиль</a></li>
                                <li><a href="#">Выход</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
1
  • если вам мешает bootstrap то вы его не правильно используете 28 июл 2016 в 9:44

1 ответ 1

2

Должен помочь следующий набор стилей стилей, чтобы перебить стандартный набор правил для меню Bootstrap:

.navbar-collapse.collapse {           // отключение скрытия меню на мелких экранах
  display: block!important;
}

.navbar-nav>li, .navbar-nav {         // выравнивание правостороннего меню по левой стороне
  float: left !important;
}

.navbar-nav.navbar-right:last-child { // присутствует для больших экранов
  margin-right: -15px !important;     // следует добавить для мобильных
}

.navbar-right {                       // выравнивает пункты в правостороннем меню
  float: right!important;             // по одной линии с левосторонними пунктами
}
  • возможно, будет работать и без !important в свойствах
  • в случае использования библиотеки не через CDN, можно в кастомайзере перенастроить брейкпоинты и переменные для мелких разрешений.

Ответ взят на SO.com

3
  • сейчас все хорошо, но только меню чуть соскакивает вниз, мб с ходу можете ответить, что не так?
    – Fangog
    28 июл 2016 в 9:51
  • меню становится больше в высоту пикселей на 30
    – Fangog
    28 июл 2016 в 9:52
  • @Fangog наугад не скажу. возможно, какие-то контейнеры при малых размерах меняют свою высоту, чтобы вместить контент, например. либо тексты не влазят. надо открывать инспектор и смотреть, какие свойства изменяются и какие стили надо поправить
    – lexxl
    28 июл 2016 в 9:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.