Increasing The Height Of The Bootstrap Collapsed "mobile" Navigation Menu?

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

Solution 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.

Solution 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;
  }
}