Bootstrap 3 - Navbar (горизонтальное меню)

$('.navbar-toggler').click(function () {
  if (!$(this).closest('.navbar').find('.navbar-collapse').hasClass('show')) {
    $(this).closest('.navbar').css('background-color', '#fffde7');
  } else {
    $(this).closest('.navbar').css('background-color', 'unset');
  }
});

...
<li class="dropdown-submenu">
  <a href="#">Ссылка 2.2</a>
  <ul class="dropdown-menu">
    <li><a href="#">Ссылка 2.2.1</a></li>
    <li><a href="#">Ссылка 2.2.2</a></li>
    <li><a href="#">Ссылка 2.2.3</a></li>
    <li><a href="#">Ссылка 2.2.4</a></li>
  </ul>
</li>
...

<script>
$('[data-toggle="dropdown"]').submenupicker();
</script>

<script>
$('[data-toggle="dropdown"]').submenupicker();
</script>

<script src="/js/bootstrap-submenu.min.js"></script>

<script>

jQuery(document).ready(function($){

$('[data-toggle="dropdown"]').submenupicker();

});

</script>

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="top-name"><a class="navbar-brand" href="#"></a></p>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ПУНКТ МЕНЮ<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Подпункт</a></li>
 <li class="dropdown-submenu"><a href="#">Еще подпункт<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Субменю</a></li>
</ul>
</li>
<li><a href="#">Еще что-то</a></li>
<li class="divider"></li>
<li><a href="#">И еще</a></li>
</ul>
</li>
</div>
</nav>
<script src="/js/bootstrap-submenu.min.js"></script>
<script>
jQuery(document).ready(function($){
$('[data-toggle="dropdown"]').submenupicker();
});
</script>

.dropdown .dropdown-menu {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .3s ease 0s;
}

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">

<div class="collapse navbar-collapse" id="navbar-main">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button id="button_1" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent1">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">H <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">L</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
              <a class="dropdown-item" href="#">A</a>
              <a class="dropdown-item" href="#">A</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">S</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>

    <!--     Второй Navbar     -->

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button id="button_2" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent2">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
    ...
  </div>
</nav>

$(document).on('click', function (e) {
  if ($('body').hasClass('offcanvas-open')) {
    if (!$(e.target).closest('.navbar').length) {
      $('.offcanvas-collapse').removeClass('open');
      $('body').removeClass('offcanvas-open');
    }
  }
})

@media (min-width: 768px) {
  .navbar .nav .dropdown-menu {
    column-width: 200px; // оптимальная ширина колонки
    column-count: 3; // оптимальное количество колонок
    column-gap: 30px; // расстояние между колонками
  }
}

position:relative;

position:relative;

<div class="container-fluid">
				<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main" data-target="#bs-example-navbar-collapse-1"> 
				<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="navbar-collapse collapse" id="navbar-main">

data-target="#bs-example-navbar-collapse-1"

data-target="#navbar-main"

data-target="#bs-example-navbar-collapse-1"

 /* CSS */
@media (max-width: 767.98px) {
  .nav.navbar-nav {
    display: flex;
  }
}

...
<li class="dropdown open">
...

$(function(){
  $(".navbar-collapse a").click(function() {
    if (!$(this).hasClass("dropdown-toggle")) {
      $(".navbar-collapse").collapse('hide');
    }
  });
});

<script type="text/javascript" src="/assets/house/js/jquery.js"></script>
  <script type="text/javascript" src="/assets/house/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true(30 minutes)"></script>
  <script type="text/javascript" src="/assets/house/js/jquery.inview.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/wow.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/mousescroll.js"></script>
  <script type="text/javascript" src="/assets/house/js/smoothscroll.js"></script>
  <script type="text/javascript" src="/assets/house/js/jquery.countTo.js"></script>
  <script type="text/javascript" src="/assets/house/js/lightbox.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/main.js"></script>
  
  <script src="/assets/house/js/jjj/owl.carousel.min.js"></script>  
  <script src="/assets/house/js/jjj/jquery.parallax-1.1.3.js"></script>
  <script src="/assets/house/js/jjj/jquery.nicescroll.min.js"></script>
  <script src="/assets/house/js/jjj/jquery.appear.js"></script>
  <script src="/assets/house/js/jjj/jquery.nav.js"></script>
  <script src="/assets/house/js/jjj/jquery.sticky.js"></script>  
  <script src="/assets/house/js/jjj/jquery.fitvids.js"></script>
  <script src="/assets/house/js/jjj/custom.js"></script>   
  <script>
      $(function(){
  $(".navbar-collapse a").click(function() {
    if (!$(this).hasClass("dropdown-toggle")) {
      $(".navbar-collapse").collapse('hide');
    }
  });
});
  </script> 

<div class="container">
    Контент до navbar...
<div>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        Контент меню (раздел navbar-header и содержимое navbar-collapse)...
    </div>
</nav>
<div class="container">
    Контент после navbar...
<div>

.navbar {
    background: rgba(255, 255, 255, 0.8);
}

body {
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (min-width: 768px) {
  .nav-center {
    position: absolute;
    left: 120px;
    right: 120px;
    top: 0;
    height: 50px;
    text-align: center;
  }
  .nav-center .navbar-nav {
    display: inline-block;
    float: none;
  }
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="nav">
	  <div class="nav-center">
		  <ul class="nav navbar-nav">
			<li class="active"><a href="#">Ссылка 1<span class="sr-only">(текущая)</span></a></li>
			<li><a href="#">Ссылка 2</a></li>
            <!--...-->
		  </ul>
	  </div>
    </div>
  </div>
</nav>

<header class="header">
    <div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header" style="float:none;">
                <a href="/" class="navbar-brand">VAPE-DECK.ru</a>
                <div class="navbar-btn pull-right pull-padding">
                    <a href="/" class="btn btn-success"><i class="fa fa-arrow-left" aria-hidden="true"></i> Вернуться на главную</a>
                </div>
            </div>
        </div>
    </div>
</header>

@media (max-width: 767px) {
  .pull-padding {
    padding-right: 15px;
  }
}

<script src="js/bootstrap-hover-dropdown.min.js"></script>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<style>
body {
  padding-top: 170px;
}
.navbar-fixed-top {
  top: 100px;
}
</style>

$(function() {
  $('ul.nav li.dropdown').hover(
    function(){ 
	  if (window.matchMedia('(min-width:768px)').matches) {		
        $(this).addClass('open');
	  }
	},
    function(){ 
      if (window.matchMedia('(min-width:768px)').matches) {
        $(this).removeClass('open');
      }
    }
  );	
});

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>[[*pagetitle]]</title>

    <!-- Bootstrap -->    
	<!--<link href="/assets/template/css/bootstrap.css" rel="stylesheet">-->
    <link href="/assets/template/css/bootstrap.min.css" rel="stylesheet">
    <!--<link href="/assets/template/css/bootstrap-theme.css" rel="stylesheet">-->
    <link href="/assets/template/css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="/assets/template/css/style.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

	<!--<script src="../assets/template/js/bootstrap.js"></script>-->
    <script src="../assets/template/js/bootstrap.min.js"></script>
    <script src="../assets/template/js/npm.js"></script>
    <script src="../assets/template/js/jquery-3.1.1.min.js"></script>
    
    <!-- Скрипт для чанка FeelBack (обратная связь) -->
    <!--<script src="assets/template/js/FeelBackMessage.js"></script>-->

<!-- Меню -->
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
    <div class="navbar-header navbar-right">
        [[pdoMenu? 
            &level=`2` 
            &parents=`0`
            &outerClass=`nav navbar-nav`
            &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+wrapper]]</ul>` 
            &tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
            &tplParentRow=`@INLINE 
                <li [[+classes]]>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="[[+link]]" [[+attributes]]>
                        [[+menutitle]]<span class="caret"></span>
                    </a>
                    [[+wrapper]]
                </li>`
        ]]
        </div>
    </div>
</nav>

<!DOCTYPE html>
<html lang="en">
    
    [[$Head?]]
    
  <body>
      
    <div class="jumbotron">
    <!-- Шапка (Header) -->
    [[$Header?]]
    
    <!-- Меню -->
    [[$Navbar?]]
    
    <!-- Слайдер -->
    [[$Slider?]]

    </div>

    <!-- Thumbnails -->
    [[$Thumbnails?]]

    
    
    
    <!-- Наполнение (Содержимое) -->
    <div class="container">
    [[*content]]
    </div>
    
    <!-- Подвал (Footer) -->
    [[$Footer?]]
    
    <!-- Скрипты -->
    [[$Footer-script?]]
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
    [[$Head?]]
  <body>
    <div class="jumbotron">
        <!-- Шапка (Header) -->
        [[$Header?]]
        
        <!-- Меню -->
        [[$Navbar?]]
    </div>
    
    <!-- Крошки -->
        [[$Crumbs?]]
        
    <!-- Наполнение (Содержимое) -->
    <div class="container">
        <h3>[[*longtitle]]</h3>
        [[*content]]
    </div>
    
    <!-- Подвал (Footer) -->
    [[$Footer?]]
    
    <!-- Скрипты -->
    [[$Footer-script?]]
  </body>
</html>

<base href="[[++site_url]]">

<link href="[[++assets_url]]template/css/bootstrap.min.css" rel="stylesheet">
<script src="[[++assets_url]]template/js/bootstrap.min.js"></script>

[["±","©","©","®","©","©","®","<code","code>"],["±","©","©","®","©","©","®","<pre class=\"prettyprint\"","pre>"]]

<pre class="prettyprint">
</pre>

<li class="dropdown-submenu">
  <a tabindex="-1" href="#">Наведи на меня...</a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт под-подменю 1...</a></li>
    <li><a href="#">Пункт под-подменю 2...</a></li>
    <li><a href="#">Пункт под-подменю 3...</a></li>
  </ul>
</li>

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}
.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <!-- ... -->
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- Основное меню --> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <!-- Пункты 1 и 2 (будут отображаться на всех устройствах, кроме sm) -->
        <li class="hidden-sm"><a href="#">Пункт 1</a></li>
        <li class="hidden-sm"><a href="#">Пункт 2</a></li>
        <!-- Эти пункты на sm будут схлопываться -->
        <li class="dropdown hidden-xs hidden-md hidden-lg">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-menu-hamburger"></i></a>
          <ul class="dropdown-menu">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

.navbar .nav > li {
  z-index: 10001;
}

https://itchief.ru/bootstrap/navbar-v3

<a href="index.html#top">Главная</a>

https://itchief.ru/bootstrap/index.html#top

<base href="https://itchief.ru/">

<a href="/index.html#top">Главная</a>

<a href="http://мойсайт/index.html">Главная</a>

<a href="/index.html">Главная</a>

.menu-item-14 a {
  height: 50px !important;
  line-height: 50px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
} 
.menu-item-14 a:before {
  font-family: FontAwesome;
  content: "\f0ac";
  padding-right: 7px;
  font-weight: normal;
  font-size: 30px;
  vertical-align: middle;
}

.menu-item-14>a:before {
    font-family: FontAwesome;
    content: "\f0ac";
    padding-right: 7px;
    font-weight: normal;
}

$(".navbar-nav > li").click(function(){
	
    var current_page = $(".navbar-nav > li.active")
	$(current_page).toggleClass("active");
	
    var page = $("a",this).attr("href");
    var content_id = page.split('.')[0];
	
    $(".content").attr("id", content_id);
    $(".content").load(page);
    $(this).toggleClass("active");
	
    if ($(".collapse").hasClass("in")) {
    	$(".collapse").collapse("hide");
    }
    return false;
});

$(function(){
  $('.navbar-nav a').each(function(){
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('active'); 
      $(this).parents('li').addClass('active');
    }
  });
});

<a href="#" class="navbar-brand">Бренд</a>
<div style="float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px;">Номер телефона</div>

<a href="#" class="navbar-brand">Бренд</a>
<img src="1.png" style="float: left; height: 50px; padding: 0px 0px; margin-right: 10px;">

/* CSS */
.navbar {
  margin-bottom: 0px;
}

<div id="myAffix" data-spy="affix" data-offset-top="100">
  ...
</div>

$('#myAffix').affix({
  offset: {
    top: 100
  }
})

.affix {
  top: 100px;
  width: 250px;
}

.navbar-collapse {
  font-size: 12px;
}

.dropdown-menu li {
    border-bottom: 1px solid #e5e5e5;;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
  /* цвет */
  color: #555;
  /* фон */
  background-color: #e7e7e7;
}

<nav class="navbar navbar-default navbar-fixed-bottom">
...
</nav>

.navbar-default {
  text-align:center;
}
.navbar-center {
  display: inline-block;
  float: none; 
}
.navbar-center>span {
  position: relative;
  display: block;
  padding: 15px 15px;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
  ...
  </div>

  <div class="collapse navbar-collapse" id="example-navbar">
    <ul class="nav navbar-nav">
    ...  
    </ul>
    <!-- Блок, содержащий текст, который необходимо отобразить по центру -->
    <div class="nav navbar-nav navbar-center">
      <span>Текст по центру</span>
    </div>
    <!-- Конец блока -->
    <ul class="nav navbar-nav navbar-right">
    ...
    </ul>
    </div>
  </div>
</nav>

$(function(){
  var toggleNavbarFixed = function() {
    $navbar = $('.navbar');
    if ($(window).width()>=768) {
      if (!$navbar.hasClass('navbar-fixed-top')) {
        $navbar.addClass('navbar-fixed-top');
      }
    }
    else {
      if ($navbar.hasClass('navbar-fixed-top')) {
        $navbar.removeClass('navbar-fixed-top');
      }
    }
  }
  toggleNavbarFixed();
  $(window).resize(function(){
    toggleNavbarFixed();
  });
});

<h2 class="section" id="h2">...</h2>
<h3 class="section" id="h3">...</h3>

body { padding-top: 60px; }
.section:before { 
  display: block; 
  content: " "; 
  margin-top: -60px; 
  height: 60px; 
  visibility: hidden; 
}

.section1:before {
  display: block; 
  content: " "; 
  margin-top: -60px; 
  height: 40px; 
  visibility: hidden; 
}

<div style="height:100px;">Шапка</div>
<nav id="navbar" class="navbar navbar-default" data-spy="affix" data-offset-top="100">
...
</nav>

#navbar {
  top:0;
  width:100%;
}

.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus {
  color: green;
  background-color: transparent;
}

.navbar-nav a:hover,
.navbar-nav a:focus {
  color: green;
  background-color: transparent !important;
}
</style>

<script src="/путь/до/tether.min.js"></script>

.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

body { padding-top: 70px; }

.navbar {
  position: relative;
}
.collapse.in {
  position: absolute !important;
}

$('.navbar').on('show.bs.collapse', function () {
  // …
})

//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
  //если она не имеет класс dropdown-toggle
  if (!$(this).hasClass("dropdown-toggle")) {
    //то закрыть меню
    $(".navbar-collapse").collapse('hide');
  }
});

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #777;
  background-color: transparent;
}
/* Изменяем цвет и фон активного пункта только при наведении */
.nav .active a:hover {
   color: yellow;
   background-color: green !important;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- Кнопка 1 с разделителем -->
        <li>
          <div class="btn-group navbar-btn">
            <button type="button" class="btn btn-danger">Action</button>
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
            </ul>
          </div>
        </li>
        <!-- Конец кода кнопки 1 с разделителем -->
        
        <!-- Кнопка 2 с разделителем -->
        <!-- Кнопка 3 с разделителем -->
        <!-- ... -->
      </ul>
    </div>
  </div>
</nav>

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    [[pdoMenu?
      &startId=`0`
      &level=`2`
      &tplParentRow=`@INLINE
        <li class="[[+classnames]]">
	  <div class="btn-group navbar-btn">
            <a href="[[+uri]]" class="btn btn-danger" [[+attributes]]>[[+menutitle]]</a>
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
	    <ul class="dropdown-menu">[[+wrapper]]</ul>
	  </div>
	</li>`
      &tplOuter=`@INLINE [[+wrapper]]`
      &rowClass=`menuid[[+id]]`
    ]]
  </ul>
</div>

.navbar ul.nav>li {
  border-right: 1px solid black;
}
.navbar ul.nav>li:last-of-type {
  border-right: none;
}

<script>
// после загрузки страницы //
$(function(){
  // добавить анимацию к dropdown при открытии //
  $('.dropdown').on('show.bs.dropdown', function(){
    $(this).find('.dropdown-menu').first().stop(true, true).animate({height: "show"}, 2000, "easeInOutCubic");
  });
  // добавить анимацию к dropdown при закрытии //
  $('.dropdown').on('hide.bs.dropdown', function(){
    $(this).find('.dropdown-menu').first().stop(true, true).animate({height: "hide"}, 2000, "easeInOutCubic");
  });
}); 
</script>

.navbar-nav > li > a, .navbar-brand {
  padding-top:2.5px !important; 
  padding-bottom:2.5px !important;
  height: 25px;
}
.navbar {
  min-height:25px !important;
}
.navbar-toggle {
  padding-top:2.5px !important; 
  padding-bottom:2.5px !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

@media (max-width: 1200px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in{
    display:block !important;
  }
}

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

:target {
  background: yellow;
}

.affix {
  left: 0;
  width:100%;
}