CODEWITHSUNDEEP
csstwitter-bootstrap
mlamp
mlamp

Reputation: 783

Bootstrap - collapse navbar bug when adding a border on hover

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

Upvotes: 0

Views: 101

Answers (2)

Roy
Roy

Reputation: 8069

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.

Upvotes: 1

mrdeleon
mrdeleon

Reputation: 645

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.

Upvotes: 0

Related Questions