Problem with navbar-collapse



  • The problem is that the menu, when the button is pressed navbar-toggleI'm supposed to be on the list, and I've got them in the form of blocks, which means it doesn't look right.

    .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>
    


  • Try pointing the data-target not to class. Oh, yeah. http://pro-cod.ru/navbar-uroki-bootstrap-3.html Or read the manual on the official website.


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2