Кнопка меню в мобильной версии киномонстр bootstrap?

Код

<div class="container-fluid">
<header>
<div class="row"><!--Убрать отступы-->
<nav role="navigation" class="navbar navbat-inverse"> <!--Навигация сайти и приоритетные ссылки. Роль-навигация-->
<div class="container">
<div class="navbar-header header">
<div class="container">
<div class="row">
<div class="col-lg-12"><!--Растягиваем на всю ширину-->
<h1><a href="#">КиноМонстр</a></h1>
<p>Кино - наша страсть!</p>
</div>
</div>
</div>

<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<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 id="navbarCollapse" class="collapse navbar-collapse navbar-right"><!--navbar-right - прижать навигацию к правому краю-->
<ul class="nav nav-pills"><!--nav-pills - горизонтальное меню-->
<li class="active"> <a href="#">Главная</a> </li>
<li> <a href="#">Фильмы</a> </li>
<li> <a href="#">Сериалы</a> </li>
<li> <a href="#">Рейтинг фильмов</a> </li>
<li> <a href="#">Контакты</a> </li>
</ul>
</div>
</div>
</nav>
</div>
</header>
</div>

1. Отталкивайтесь от оригинального кода:

<div class="container-fluid">
			<div class="row">
				<nav role="navigation" class="navbar navbar-inverse">
					<div class="container">
						<div class="navbar-header header">
							<div class="container">
								<div class="row">
									<div class="col-lg-12">
										<h1><a href="#">КиноМонстр</a></h1>
										<p>Кино - наша страсть!</p>
									</div>
								</div>
							</div>
							<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
							<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 id="navbarCollapse" class="collapse navbar-collapse navbar-right">
							<ul class="nav nav-pills">
								<li class="active"> <a href="#">Главная</a> </li>
								<li> <a href="#">Фильмы</a> </li>
								<li> <a href="#">Сериалы</a> </li>
								<li> <a href="#">Рейтинг фильмов</a> </li>
								<li> <a href="#">Контакты</a> </li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</div>

CSS

.header a, a:hover {
	color: #f0ad4e;
	text-decoration: none;
}

.header h1 {
	letter-spacing: 15px;
	font-size: 300%;
}

.header p {
	color: white !important;
	font-size: 90%;
	letter-spacing: 3px;
}


.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #346270;
}

.nav-pills>li>a {
	color: #fff;
}

.nav-pills>li>a:hover {
	background-color: #346270;
}


.navbar-inverse {
    padding: 1%;
    background-color: rgb(34, 34, 34);
    border-color: rgb(8, 8, 8);
}

@media (max-width: 767px) {
	.nav-pills>li {
		float: none;
	}

	.nav-pills {
		text-align: center;
	}

	.header h1 { 
	    font-size: 280%;
	    letter-spacing: 5px;
	}

	.header {
		text-align: center;
	}
} 

2. Смотрите живой пример:

/ru/courses/bootstrap/interactive-header-complete/