Add A Border At The Bottom Of The Menu On Hover And Active

I'm trying to get this: But don't get it (lol) and having this instead: Don't know where to adjust the thing. Do you have any idea ? When i tried to fix it with the height it in

Solution 1:

Try to add this code:

.navbar-default.navbar-nav > li > a {
  line-height: 140px; /* = height of #menu */padding-bottom: 0;
  padding-top: 0;
}

Check the result:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-default.navbar-nav > li > a:hover,
.navbar-default.navbar-nav > li > a:focus {
  color: black;
  box-shadow: inset 0px -6px0px#000; 

}
.navbar-default.navbar-nav > .active > a,
.navbar-default.navbar-nav > .active > a:hover,
.navbar-default.navbar-nav > .active > a:focus {
  color: black;
  box-shadow: inset 0px -6px0px#000; 
}

#menu {
  height: 140px;
}
.navbar-default.navbar-nav > li > a {
  line-height: 140px; /* = height of #menu */padding-bottom: 0;
  padding-top: 0;
}

<header><navclass="navbar navbar-default"id="menu"><divclass="container-fluid"><divclass="row"><divclass="col-md-3 col-sm-3"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="index.html"><imgalt="Brand"src="img/logo.png"height="100px;"></a></div></div><divclass="col-md-9 col-sm-9"><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="nav navbar-nav "><liclass="active"><ahref="#">Accueil <spanclass="sr-only">(current)</span></a></li><li><ahref="#">Page 1</a></li><li><ahref="#">Page 2</a></li><li><ahref="#">Contact</a></li></ul></div></div></div></div></nav></header>