Bootstrap - collapse navbar bug when adding a border on hover

0
votes

I added a border-bottom to my navbar li on hover like the following:

.navbar-default .navbar-nav li a:hover{
    border-bottom: 4px solid #62c4a4;
}

However this causes the navbar-collapse to appear as a tiny box with a scrollbar instead of expanding the list items.

enter image description here

How can I make sure the navbar-collapse expands normally and the border on hover effect still shows?

code pen http://codepen.io/meek/pen/NNprYb

2
csstwitter-bootstrap
Please add a starting point in code (for example a JSFiddle or CodePen) to give your question a proper solution. Only an image won't help solving the problem. See also stackoverflow.com/help/mcve - Roy
@Roy added now, sorry. - mlamp

2 Answers

1
votes

Try setting height of .navbar-collapse.collapse.in .navbar-nav to auto, like this:

.navbar-collapse.collapse.in .navbar-nav {
  height: auto;
}

Because the Bootstrap CSS is setting the height to 70px, the height of the navigation bar. You want to change it (setting it to auto) when the menu is active.

0
votes

I believe this has to do with you setting the height to 70px;

.navbar-default, .navbar-nav {
//height: 70px;
}

When you comment that out you don't get the scrollbar.