Is there a way to change the Bootstrap Navbar Height?

Question

I'm designing a website using Twitter's Bootstrap, and I'm having difficulty with the responsive navbar. In bootstrap, the navbar allows a mobile user to click an icon to extend the navbar and display navigation links. I'm unable to find how to adjust the maximum height... when I try and use one of the drop down bars, the navbar doesn't change size accordingly, and the user is unable to see any of the links.

Thanks for any help you can provide.

-A

EDIT: here's the code that I'm using for the navbar (html) the css that I'm using is the standard bootstrap.css and bootrstrap-responsive.css:

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="http://example.com">organization</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a href="index.html">Home</a></li>
                            <li class="active"><a href="contact.html">Contact</a></li>
                            <li><a href="nowplaying.html">Now Playing</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Public Resources <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="public.html#observatory">Observatory</a></li>
                                    <li><a href="public.html#planetarium">Planetarium</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">For Teachers and Schools</li>
                                    <li><a href="schools.html#programs">Programs</a></li>
                                    <li><a href="schools.html#events">Host an Event</a></li>
                                    <li><a href="schools.html#education">Educational Initiatives</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Undergraduate Resources <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="students.html#observatory">Observatory</a></li>
                                    <li><a href="students.html#planetarium">Planetarium</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">Physics</li>
                                    <li><a href="xxx.com">Physics Homepage</a></li>
                                    <li><a href="xxx.com">Physics and Astronomy</a></li>
                                </ul>
                            </li>
                            <li><a href="volunteer.html">Volunteer</a></li>
                            <li><a href="faq.html">FAQ</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

Solution 1

Ok, the way I fixed the first part (having a header that didn't resize when I wanted to) was by changing the min width value in the bootstrap-responsive.css like so:

@media (min-width: 1200px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}    
}

where 1200px was changed to 1200 from 980. Tricky tricky... for the record, it's on line 1104.

Solution 2

The default navbar html code is the following:

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

And if you inspect the navbar element you will find that the inside div (navbar-inner) has the class:

.navbar-inner {
   min-height: 40px;
}

You can remove this value and find that the navbar remains the same height, that's normal, because the height of the navbar is set to "auto". Therefore if you remove the min-height the height will depend of the link tags padding, inside the <ul></ul>, and the <a class="brand"></a> padding as well.

.navbar .nav > li > a {
  float: none;
  **padding: 10px 15px 10px;**
  color: #777;
  text-decoration: none;
  text-shadow: 0 1px 0 #FFF;
}

.navbar .brand {
  display: block;
  float: left;
  **padding: 10px 20px 10px;**
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: #777;
  text-shadow: 0 1px 0 #FFF;
}

If you change it, you will find that the height of the "navbar" parent will automatically change. You can also maintain the min-height property and just change its value, adjusting the padding of the elements I've mentioned above.

For the responsive part, you can edit all the styles in the bootstrap-responsive.css, inside the specific media query for the resolution that you want to edit.

EDIT: Just saw your HTML, check the padding of your link tags inside the navbar, reduce it, change the .navbar-inner min-height too, and play with the values.

Comments

[ajdigregorio]

ok, so the navbar displays things fine now.. but for the responsive part, I'm still unable to get all of the links to display.... I can't find any max-height or similar attribute... any ideas?