Why is my padding doing this on bootstrap 3 navbar collapse?

Question

This question has three parts, I thought it would be best to ask all on here as there relevant to each other.

If this question is too much/over the top please advice and I will amend it.

Issue #1

Basically when my navbar collapses into a drop down menu the padding increases and leaves massive gapes between the links. as seen below;

Resolved by removing line-height: 50px; from .navbar-default .navbar-nav > li > a {

Issue #2

I have a linebreak within the toggle mode, however I cant seem to get this to go below the logo. I'm guessing it has fix height of 50px, such as all the default settings on navbar.

resoloved by changing due to my logo having a height of 100px .

Issue #3

Is removing the scroll bar within the navbar

resoloved by changing max height in .navbar-collapse {max-height: 340px;} to 700px

NAVBAR CSS

.navbar {
    margin-bottom: 0;
    background: #191919;
    min-height: 100px !important;
    border: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.navbar-brand {
    position: relative;
    padding: 21px 25px 21px 25px;
    margin: 0!important;
    transition: all 0.3s ease-in-out;
    color: #1c1c1c;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.navbar-default .navbar-nav {
    margin-right: 0px!important;
    position: relative;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.navbar-default .navbar-nav > li {
    margin-left: 3px;
}

.navbar-default .navbar-nav > li > a {
    color: #2eb60f;
    display: bold;
    font-size: 14px;
    font-weight: 200;
    overflow: hidden;
    line-height: 50px;
    padding: 20px 10px 20px 10px !important;
}

.navbar-default .navbar-nav > li > a {
    border-bottom: 3px solid #191919;
}

.navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li:hover > a {
    border-bottom: 3px solid #04fa00;
    color: #04fa00;
}

.navbar-default .navbar-toggle  {
  border-color: #191919;

}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #191919;
}

.navbar-default .navbar-collapse {
    border: none;
    text-align: center;
}

.navbar-default .navbar-collapse > li > a {
    padding: 2px 1px 2px 1px !important;
}

HTML of navbar

<div id="container">
     <header class="clearfix">
             <div class="navbar navbar-default">

             <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                               <i class="glyphicon glyphicon-resize-vertical" style="font-size: 16px;color:#04fa00"></i>

                       </button>
                          <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" rel="home" href="#">
                                <img style="max-width:100px; margin-top: -16px;"
                                src="/images/mainlogo.png">
    </a>
</div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="services.html">SERVICES</a></li>
                            <li><a href="testimonals.php">TESTIMONALS</a></li>
                            <li><a href="gallery.php">GALLERY</a></li>
                            <li><a href="contact.php">CONTACT</a></li>
                            <li><a href="admin.php">ADMIN</a></li>
                        </ul>
                  </div><!-- /.navbar-collapse -->
             </div><!-- /.navbar navbar-default -->
     </header>

</div><!-- /.end container -->

Answer 1

1st problem:

To fix the line break that crosses through the logo. .navbar-header { height: 100px; }

2nd Problem.

That second scroll bar is caused by

.navbar-collapse {max-height: 340px;} 

remove the max height all together or make it larger to accommodate for the nav bar height.

3rd problem.

The padding/line height seems to be multiple issues. If you remove

.navbar-default .navbar-nav > li > a {padding: 20px 10px 20px 10px !important;}

That will fix it for drop down but you will still have to adjust media query's for the expanded nav bar.

Answer 2

For the first question, you can solve it by removing the line-height from your style. However, that would make your elements top aligned, they won't appear nice or vertically centred with the logo.

So, to do that, keep the line-height, and introduce a difference line-height based on the breaking point of your menu. Something like this using CSS would work:

1st Issue:

@media only screen and (max-width : 768px) {
.navbar-default .navbar-nav > li > a {
text-align:center;
line-height:1.7rem;
}}

2nd Issue:

As for the Second Issue with the border and the logo, that's easily solved by making your navbar-header accomodate your logo height:

.navbar-header {min-height:70px;} /* accomodate the logo height + some padding or whatever */

As for the third issue, I cannot seem to see it on the Fiddle I am afraid.

Here is a working fiddle for your reference: http://jsfiddle.net/p8e9aLc9/11/

Answer 3

Question1: It's your line-height that's making the links so spaced:

.navbar-default .navbar-nav > li > a {
    ...
    line-height: 50px;
}

Question2: I can't really tell without seeing the full page (is there a url we can check out or can you make a fiddle?)

Question3: It looks like you need an overflow: hidden; on one of the elements containing the nav, again it would be easier to debug in the full form.