0

Проблема заключается в том что пункты меню, при нажатии кнопку navbar-toggle, должны показываться в виде списка, а у меня они располагаются в виде блоков, т.е. не корректно выглядит, как исправить?

.navbar-header {
  background-color: #a52240;
}
.navbar .btn-navbar {
  margin-top: -20px;
}
#category {
  font-size: 18px;
  color: #fff;
  padding-top: 12px;
  padding-left: 20px;
  margin-bottom: -10px;
}
.navbar {
  border: 0 none
}
.navigation {
  font-family: Roboto;
  font-weight: 100;
  border-top: none;
  border-bottom: none;
  text-shadow: none;
}
.navbar-main {
  font-size: 17px;
  background-color: #a52240;
  color: #fff;
  border-radius: 0;
  font-weight: 100;
  text-shadow: none;
  padding-left: 30px;
}
.navbar-main a {
  color: #fff;
}
.page-header {
  display: none;
}
.navbar {
  height: 50px;
}
.navbar .nav > li > a {
  padding: 11px 25px 11px;
}
.navbar .nav > li {
  line-height: 1.7;
}
.menu>li.active {
  background-image: url(/images/button.png);
  height: 61px;
  border: none;
}
.menu>li.current {
  background-image: url(/images/button.png);
  background-position: 100%;
}
.navbar .nav > .active > a {
  color: #fff;
  background-image: url(/images/button.png);
}
.navbar .nav > .active > a:hover {
  color: #fff;
  background-image: url(/images/button.png);
}
.navbar .nav > .active > a:focus {
  background-color: #fff;
}
.navbar .nav > .active > a:hover {
  background: none;
  background-color: none;
  text-decoration: none;
}
.navbar .nav > li a:hover {
  color: #fff;
  height: 100%;
  background-color: #729f46;
  text-decoration: underline;
}
.nav>li>a:hover {
  height: 100%;
  color: #fff;
  background-color: #729f46;
  text-decoration: underline;
}
<nav id="menu" class="navbar navigation">
  <div class="navbar-header"><span id="category" class="visible-xs main-lbl">Меню</span>
    <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse navbar-ex1-collapse navbar navbar-main">
    <ul class="nav menu"><li>1</li><li>2</li><li>3</li></ul></div></nav>
3
  • У меня ничего не показывает при нажатии на кнопку, возможно вы забыли вставить js код в вопрос.
    – stackanon
    29 июл 2016 в 2:06
  • @stackanon это стандартная bootstrap функция.
    – Денис
    29 июл 2016 в 6:55
  • при формулировке вопросов не стоит рассчитывать, что кто-то тут знает все стандартные (или хотя-бы какие-то) функции bootstrap. вопрос следует давать в максимально понятном виде и возможностью посмотреть весь проблемный код и воспроизвести проблему, а не догадываться
    – lexxl
    29 июл 2016 в 7:32

1 ответ 1

1

попробуйте указать data-target не на класс а на id а вообще вот http://pro-cod.ru/navbar-uroki-bootstrap-3.html или читаем мануал на официальном сайте

2
  • да все прочел, проблема в css, видимо мои свойства как-то перекрывают bootstrap и от этого работает не корректно, но я не могу выяснить причину...
    – Денис
    29 июл 2016 в 8:52
  • ну так откройте панель разработчика и вырубайте по очереди свои правила, пока не заработает
    – user212578
    29 июл 2016 в 20:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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