0
Мой загрузочный навигатор не может быть настроен в CSS. В качестве примера я вставил свой CSS-код. Он также не работает, когда я отбрасываю id #nav и вместо этого использую .navbar-inverse; ... Используемые цвета CSS - это просто посмотреть, производится ли изменение.Невозможно настроить Navbar, созданный с помощью Bootstrap 3
Вот picture, что появляется ...
Большое спасибо за любую помощь/предложения! :)
@media (max-width: @screen-md-max) {
.container{
padding: 0;
overflow-x: hidden;
}
}
/* ----- BACKGROUND ----- */
body {
background-image: url('../img/harley.jpg');
background-repeat: no-repeat;
background-size: cover;
margin: -10px;
background-attachment: fixed;
}
/* ----- BODY ----- */
#header {
height: 150px;
margin-top: 0px;
margin-bottom: 0;
margin: auto;
text-align: center;
background-color: rgba(255, 255, 255, 0.5);
background-attachment: fixed;
}
#header h1 {
font-family: "Trocchi", serif;
color: #3E2F1B;
padding-top: 30px;
}
#header h2 {
font-family: "Trocchi", serif;
color: #644A26;
font-size: 20px;
padding-top: 20px;
}
/* -- RESPONSIVE HEADER (need to add more) */
@media all and (max-width: 2000px) {
#header h1 {
font-size: 5.7em;
}
}
@media all and (max-width: 1500px) {
#header h1 {
font-size: 5.0em;
}
}
@media all and (max-width: 1000px) {
#header h1 {
font-size: 4.3em;
}
}
@media all and (max-width: 750px) {
#header h1 {
font-size: 3.7em;
}
}
@media all and (max-width: 700px) {
#header h1 {
font-size: 3.0em;
}
}
@media all and (max-width: 500px) {
#header h1 {
font-size: 2.3em;
}
}
<<<<<<< HEAD
/* ----- NAVIGATION BAR ----- */
#nav {
background-color: pink;
border-color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Home/Harley's Haunts</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- import font "Trocchi" -->
<style>
@import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<!-- ***** HEADER ***** -->
<div class="container-fluid" id="header">
<h1>HARLEY'S HAUNTS</h1>
<h2>Where dogs are welcome in Aberdeen!</h2>
</div>
<!-- ***** NAVIGATION BAR ***** -->
<nav class="navbar navbar-inverse" id="nav">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Pet-Friendly Venues<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Shops</a></li>
<li><a href="#">Cafes</a></li>
<li><a href="#">Pubs/Bars</a></li>
<li><a href="#">Restuarants</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
</body>
</html>
Когда вы используете имена цветов, перед вами нет '#'. '#' только для шестнадцатеричных значений, таких как '# FFFFFF'. Розовый - розовый, а '#' впереди. – Stefan
Упс! Глупая ошибка - я устал от попытки решить эту проблему. Когда я удаляю #, он все равно ничего не меняет ... – Bambi
Осмотрите элемент и проверьте, что что-то переопределяет ваши цвета, тогда вы можете попробовать применить его к более низкому уровню иерархии или если вы действительно хотите заставить его использовать '! important', в вашем случае' background-color: pink! important; ' – Stefan