The problem is that the menu items, when you click the navbar-toggle button, should appear in the form of a list, and in me they are arranged in blocks, i.e. It does not look right, how to fix it?

 .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>
  • I do not show anything when I press the button, perhaps you forgot to insert the js code into the question. - stackanon
  • @stackanon is a standard bootstrap function. - Denis
  • When formulating questions, you should not expect that someone here knows all the standard (or at least some) functions of bootstrap . The question should be given in the most understandable form and the opportunity to look at all the problem code and reproduce the problem, and not guess - lexxl

1 answer 1

Try to specify the data-target not on the class but on the id, but in general here http://pro-cod.ru/navbar-uroki-bootstrap-3.html or read the manual on the official website

  • Yes, I read everything, the problem is in css , apparently my properties somehow overlap the bootstrap and this does not work correctly, but I can not figure out the reason ... - Denis
  • Well, open the developer panel and cut down your rules one by one until it works - Russian Bear