title: Increasing the height of the Bootstrap Collapsed "mobile" navigation menu?
body: <p>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. </p>
  
  <p>Here's a screenshot of what I am talking about to avoid any confusion. <strong>The blue bordered area</strong> 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. </p>
  
  <p><a href="https://i.stack.imgur.com/Fao8b.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fao8b.jpg" alt="Drop down nav"></a></p>
  
  <p>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. </p>
  
  <p>Here's the code, I am just using a simple generic startbootstrap.com template here. </p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header page-scroll"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand page-scroll" href="#page-top"&gt;Start Bootstrap&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;!-- Hidden li included to remove active class from about link when scrolled up past about section --&gt;
                      &lt;li class="hidden"&gt;
                          &lt;a class="page-scroll" href="#page-top"&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#about"&gt;About&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#services"&gt;Services&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#contact"&gt;Contact&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#about"&gt;About&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#services"&gt;Services&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#contact"&gt;Contact&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#about"&gt;About&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#services"&gt;Services&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#contact"&gt;Contact&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- /.navbar-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.container --&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/nmerm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nmerm.jpg" alt="enter image description here"></a></p>