В настоящее время мой навигатор имеет высоту около 50px. Я хочу, чтобы это было около 150 пикселей. Я попытался создать добавление в класс навигатора Bootstrap, написав свой собственный файл CSS, но изменение высоты navbar, nav или всего остального не влияет на макет. Как изменить высоту навигатора? также, цвет шрифта?Как переопределить класс Bootstrap, чтобы увеличить высоту навигатора?
.navbar-inverse {
\t background-color: #337ab7;
\t border-color:#337ab7;
\t border-radius: 0px;
\t height:100px;
\t width:100%;
\t position: fixed;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
\t color: #fff;
\t background-color: #0e364c;
}
.navbar-inverse .navbar-nav>li>a {
\t color:#ffffff;font-family:
\t 'Open Sans', sans-serif;
}
.navbar-inverse .navbar-brand {
\t color:#ffffff;
}
.menu {
\t display:none;
}
@media all and (max-width:768px){
/*login register*/
@import url(http://fonts.googleapis.com/css?family=Roboto);
<head>
{% load static %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css"
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<nav class="navbar navbar-inverse" id ="bar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> The Transparency Project</a>
</div><!--navbar-header close-->
<div class="collapse navbar-collapse drop_menu" id="content_details">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span> Opinions and Analysis</a></li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span> Contact</a></li>
</ul><!--nav navbar-nav close-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#signup-modal"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#" data-toggle="modal" data-target="#login-modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul><!--navbar-right close-->
</div><!--collapse navbar-collapse drop_menu close-->
</div><!--container-fluid close-->
</nav><!--navbar navbar-inverse close-->
<br>
<div class="container">
<div class="jumbotron">
<h1>sign up & login forms Tutorial</h1>
<p> click on login or sign up menu in header</p>
</div>
</div><!--container close-->
CSS - это каскадные таблицы стилей. Таким образом, в основном код в конце таблицы стилей отменяет предыдущий код. Так что я бы сделал это в конце вашей таблицы стилей (учитывая, что он был включен после вашего boostrap) есть свой код класса. Если это все еще надоедливо, вы можете использовать '! Important; ', но мне нравится стараться держаться подальше от них, если они не нужны. – oompahlumpa