CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ltdev
ltdev

Reputation: 4497

Bootstrap - reduce size of navbar

I'm having two navbars on my page, where in the first one ( .tob-bar ) I show my social media and in the second one I have the navigation menu

<nav class="navbar navbar-inverse no-margin top-bar">
        <div class="container">

            // social media here ...

        </div><!-- /.container-fluid -->
</nav><!-- /.navbar -->


<nav class="navbar navbar-inverse no-margin">
        <div class="container">

            // nav menu here ...

        </div><!-- /.container-fluid -->
</nav><!-- /.navbar -->

How can I set the height of the .top-bar to lower px? I have tried to set 

.top-bar {
   height: 20px!important;
}

but doesn't seems to work, it still has the default from bootstrap. I have also tried to check in firebug for any height values, but no luck

Upvotes: 0

Views: 64

Answers (1)

Chris Yongchu
Chris Yongchu

Reputation: 789

I have also tried to check in firebug for any height values, but no luck

That's because Bootstrap uses min-height: 50px; for .navbar. The min-height property always overrides both height and max-height. You need to declare your .top-bar value as follows:

.top-bar {
  min-height: 20px !important;
}

Here's an example

.top-bar {
  min-height: 60px; /* overrides height and max-height */
  height: 25px;
  max-height: 50px;
}

If height > min-height or vice versa, the value that is the greatest will be the one that is rendered.

Upvotes: 1

Related Questions