Increasing the height of the Bootstrap Collapsed "mobile" navigation menu? - html

Question

I am struggling to get the mobile collapsed drop down nav to increase in height. Currently it is stuck at about 340px and I need it to expand to fit the menu items being contained within the collapsed nav. I have searched tirelessly on Google and here to find an answer but none of them seem to make an impact, even when I use !important.
Here's a screenshot of what I am talking about to avoid any confusion. The blue bordered area that I added to the screenshot is what I am talking about. This seems to be set to a static height and I need it to extend about another 50px-100px for this particular application. I did not show code here because I am hoping to just see the "best way" to change the default height for my future reference.
Thanks for the help!
EDIT: I did not submit code because right now it's just the default bootstrap nav code so I didn't think I needed to reference it.
Here's the code, I am just using a simple generic startbootstrap.com template here.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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-brand page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I have no custom CSS yet as this is the first thing I am trying to change and don't know where in the CSS the dropdown nav should be edited.

Answer 1

Without seeing the code it is difficult to say what is impacting the height. If you add more <li>'s to the menu, does it expand?
If not, there could be a static height or max-height css property applied to the .dropdown-menu
Editing for improvement:
It looks like either of these elements;
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
has a height or max-height and overflow:auto property.
Inspect these elements in chrome to see if this is the case. Then, set height:auto; and/or adjust the max-height property to allow for increased height for that element.
You can set these in your custom CSS file and they will override Bootstrap's style. Just ensure that your CSS file is loaded after the Bootstrap CSS file.
If you can post a link I can look at it and provide the exact code needed to make the changes.

Answer 2

I had the same problem with my mobile collapsed drop-down navigation displaying a scrollbar rather than expanding to show all the navigation links. My solution was to hide the scrollbar then add pixels to the bottom of my data-target div.
You should be able to hide the scrollbar using:
.navbar-collapse.in {
overflow: hidden;
}
Then you can add the extra pixels needed at the bottom by adding padding to the data-target div when sized for mobile devices:
#media (max-width: 768px) {
.navbar-ex1-collapse {
padding-bottom: 50px;
}
}