Currently my navbar is about 50px high. I want it to be around 150px. I tried creating adding onto Bootstrap's navbar class by writing my own in the CSS file, but changing the height of navbar, nav, or anything else doesn't seem to affect the layout. How do I change the navbar height? also, the font color?
.navbar-inverse {
background-color: #337ab7;
border-color:#337ab7;
border-radius: 0px;
height:100px;
width:100%;
position: fixed;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
color: #fff;
background-color: #0e364c;
}
.navbar-inverse .navbar-nav>li>a {
color:#ffffff;font-family:
'Open Sans', sans-serif;
}
.navbar-inverse .navbar-brand {
color:#ffffff;
}
.menu {
display:none;
}
@media all and (max-width:768px){
/*login register*/
@import url();<head>
{% load static %}
<link href="+Sans" rel="stylesheet">
<link rel="stylesheet" href=".6.3/font-awesome.min.css"
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<link rel="stylesheet" href=".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-->Currently my navbar is about 50px high. I want it to be around 150px. I tried creating adding onto Bootstrap's navbar class by writing my own in the CSS file, but changing the height of navbar, nav, or anything else doesn't seem to affect the layout. How do I change the navbar height? also, the font color?
.navbar-inverse {
background-color: #337ab7;
border-color:#337ab7;
border-radius: 0px;
height:100px;
width:100%;
position: fixed;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
color: #fff;
background-color: #0e364c;
}
.navbar-inverse .navbar-nav>li>a {
color:#ffffff;font-family:
'Open Sans', sans-serif;
}
.navbar-inverse .navbar-brand {
color:#ffffff;
}
.menu {
display:none;
}
@media all and (max-width:768px){
/*login register*/
@import url(http://fonts.googleapis./css?family=Roboto);<head>
{% load static %}
<link href="https://fonts.googleapis./css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://opensource.keycdn./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./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 stands for cascading style sheets. So basically the code at the end of the stylesheet overrides the previous code. So what I would do is at the end of your stylesheet (given it was included after your boostrap) have your class code there. If it's still being pesky you could use
!important;but I like to try to stay away form them if they are not necessary. – oompahlumpa Commented Dec 20, 2016 at 21:53
4 Answers
Reset to default 4First you need to rearrange your stylesheets. Bootstrap needs to be first and your custom css file must e after Bootstrap in order to override it.
Here is the correct order:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
Now, in order to override the height of the navbar, in your custom stylesheet change the min-height of the .navbar class
.navbar {
min-height: 150px;
}
and for the color you need the following override:
.navbar-inverse .navbar-nav > li > a {
color: red; /* here goes the color of your choice */
}
You can edit it the way that you have, you just have to make sure your css files are loaded after the bootstrap file. Not before, which is what it looks like is happening.
This is based on the assumpation that this is your css file:
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
If you swap these two it should override bootstraps settings:
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
If bootstrap overriding your CSS property then you have to specify !important to your defined CSS Properties like,
.navbar{
height:150px !important;
}
For custom height you have to use !important in defining your height.
.navbar {
min-height: 150px !important;
}