Bootstrap3 - Change navbar size

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>
                    <a href="#" style="font-family: 'Roboto', sans-serif;">ACCUEIL</a>
                </li>
                <li>
                    <a href="#" style="font-family: 'Roboto', sans-serif;">BOUTIQUE</a>
                </li>
                <li>
                    <a href="#" style="font-family: 'Roboto', sans-serif;">CONTACT</a>
                </li>
            </ul>

          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#" style="font-family: 'Roboto', sans-serif;">MON COMPTE</a>
            </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>

try .navbar { height: 500px; /*or whatever height you want to achieve*/} preferably on your own stylesheet rather than overwriting bootstrap's original files. — Jennift, Dec 05 '16 at 00:00
Possible duplicate of [Change navbar height in Bootstrap3](http://stackoverflow.com/questions/19890700/change-navbar-height-in-bootstrap3) — Simon C, Dec 05 '16 at 00:30

score 1 · Accepted Answer · answered Dec 05 '16 at 05:40

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>
                    <a href="#" style="font-family: 'Roboto', sans-serif;">ACCUEIL</a>
                </li>
                <li>
                    <a href="#" style="font-family: 'Roboto', sans-serif;">BOUTIQUE</a>
                </li>
                <li>
                    <a href="#" style="font-family: 'Roboto', sans-serif;">CONTACT</a>
                </li>
            </ul>

          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#" style="font-family: 'Roboto', sans-serif;">MON COMPTE</a>
            </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>

It worked well thanks ! I have an other question, now that i've increased my navbar size I want to vertically center my elements, I've managed to do it with my links but not with my search bar and the orange lock. Here's the fiddle (navbar size isn't increased yet, I didn't know how to link my own CSS file into fiddle) : https://jsfiddle.net/jc1tpt3u/ — Charles Duporge, Dec 05 '16 at 10:54
whatever css that you have in your file. can you copy that in the css section of the jsfiddle — Shubham Khatri, Dec 05 '16 at 14:19

Bootstrap3 - Change navbar size

1 Answers1