How do I override Bootstrap's class to increase the navbar height?
Question
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.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-->
4 answers
solution1
3 2016-12-20 21:53:58
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.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
solution2
3 2016-12-20 22:22:40
First you need to rearrange your stylesheets. Bootstrap needs to be first and your custom css file must come after Bootstrap in order to override it.
Here is the correct order:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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 */
}
solution3
0 2016-12-20 22:03:26
If bootstrap overriding your CSS property then you have to specify !important to your defined CSS Properties like,
.navbar{
height:150px !important;
}
solution4
0
For custom height you have to use !important in defining your height.
.navbar {
min-height: 150px !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.