Bootstrap3 - Change navbar size - html

Question

I'm new to Bootstrap and I want to change the height of my navbar. I've seen some topics about that but nothing solved my problem. I took the navbar code from a theme so i don't understand all of the code yet. Tried to change the height of navbar class but there are many of them so i'm quite confused.
navbar class from index.html :
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
ACCUEIL
</li>
<li>
BOUTIQUE
</li>
<li>
CONTACT
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
MON COMPTE
</li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange">
<span class="glyphicon glyphicon-lock" ></span>
</button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>

Answer 1

You can apply the height css attribute to your navbar class and it will work
However you should do this in a separate css file and not modify
bootstrap's own css.
One thing that you should keep in mind is that when you include the css file in your html is that, it should be included after the bootstrap.min.css so that it will override bootstrap css.
.navbar {
height: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
ACCUEIL
</li>
<li>
BOUTIQUE
</li>
<li>
CONTACT
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
MON COMPTE
</li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange">
<span class="glyphicon glyphicon-lock" ></span>
</button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>