paintedcones paintedcones - 2 months ago 7
CSS Question

Is there a way to change the Bootstrap Navbar Height?

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>

Answer

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.