Connoisseurs, attention question! Tell me please, how can I make two different navbar through bootstrap so that they have different properties? Is it possible at all?

<div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="index.html">Главная</a> </li> <li> <a href="demo.html">Демо-доступ</a> </li> <li> <a href="catalog.html">Каталог</a> </li> <li> <a href="contact.html">Контакты</a> </li> </ul> </div> </div> </div> </div>

This is my main navbar. I need to make a smaller navbar under it, offset in the center. Tell me pliz.

    2 answers 2

    Give your menu an additional class ( class="my-navigation" ) + do not forget about your id for navbar-collapse (respectively, and the same for <button ... data-target="..."> ...).

    Add your styles for this menu .my-navigation { ... } .

    Alignment is usually done with the help of the bootstrap grid, for example:

     .container .row .col-md-10

    Choose any:

     .navbar-2 { background: #333; } .navbar-2.navbar-default .navbar-nav > li > a:hover, .navbar-2.navbar-default .navbar-nav > li > a:focus { color: #fff; } .navbar-3 { background: tomato; } .navbar-3 .navbar-toggle { background-color: transparent; } .navbar-3 .icon-bar { background-color: #fff; } .navbar-3 .navbar-nav > li > a { color: #fff; } .navbar-3 .nav > li > a:hover, .navbar-3 .nav > li > a:focus { background: #fff; color: #333; } 
     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> </head> <body> <!-- Основное меню --> <div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="index.html">Главная</a> </li> <li> <a href="demo.html">Демо-доступ</a> </li> <li> <a href="catalog.html">Каталог</a> </li> <li> <a href="contact.html">Контакты</a> </li> </ul> </div> </div> </div> </div> <!-- Меню 2 c классом navbar-2--> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="navbar navbar-default navbar-2"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse2"> <ul class="nav navbar-nav"> <li> <a href="index.html">Главная</a> </li> <li> <a href="demo.html">Демо-доступ</a> </li> <li> <a href="catalog.html">Каталог</a> </li> <li> <a href="contact.html">Контакты</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <!-- Меню 3 c классом navbar-3--> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="navbar navbar-3"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse3"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse3"> <ul class="nav navbar-nav"> <li> <a href="index.html">Главная</a> </li> <li> <a href="demo.html">Демо-доступ</a> </li> <li> <a href="catalog.html">Каталог</a> </li> <li> <a href="contact.html">Контакты</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </body> </html>

    PS: Learn more about bootstrap!

      You can freely place as many navbars on the page as you need. "Smaller centered navbar with smaller sizes" can be created like this:

       <div class="navbar navbar-default"> Верхний навбар из вашего примера </div> <div class="container"> <div class="navbar navbar-default"> Навбар ниже. Смещен по центру за счет вписывания в .container </div> </div>

      If you want a different style of navbar, you can use the bootstrap classes for navbars of different colors - .navbar-default and .navbar-inverse . Or create your own class of type .navbar-xxx , style it as you like, and use instead of .navbar-default .