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

Ребята не могу разобраться. Сначало Хедар был белый, хотя иду строго по роликам, поправил. Дошел до мобильной версии, когда экран уменьшается, то менюшка исчезает, но появляется кнопка button. Но она на черном цвете не видна, хотя подвожу мышкой, щелкаю и разворачивается меню. Помогите, не могу понять, какой стиль написать.

Bootstrap

3 ответов

Код

<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. Смотрите живой пример:

https://fructcode.com/ru/courses/bootstrap/interactive-header-complete/