Bootstrap 3 navigation list items hover issue

Question

I have tryed this example:

html

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <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>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
<h1>Home</h1>

css

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

http://jsfiddle.net/bdd9U/3/

from this page: Center content in responsive bootstrap navbar

and i wanted to add hover effect to nav list items like so:

http://jsfiddle.net/bdd9U/560/

but at the bottom it has some extra height and the hover effect cant take enough space. If we resize the screen to mobile size we can see that the header height is reduced by about 5px from the bottom. How to repair this issue?

Answer 1

It looks like display: inline-block is adding space after the navbar elements.

You can set a fixed height for the navbar.

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    height: 45px; /* Add */
  }
}

Updated JSfiddle