Asez Asez - 1 month ago 10
CSS Question

Bootstrap Active Menu Changes Navbar Height

I added a 2px border-bottom to the active menu(bootstrap). But because of that, my navbar resizes automaticaly. Example: my navbar is 70px height and after adding that 2px border-bottom, my navbar resizes to 72px. I would like to know how to block that. I tried with min/max-height but it doesn't work.

<div class="collapse navbar-collapse navbar-right" id="nbar-collapse">
<ul class="nav navbar-nav">
<li><a class="active-page" href="#">Home</a></li>

<li><a href="#">Host2</a></li>

<li><a href="#">Host3</a></li>
</ul>
</div>


.active-page
{
border-bottom: 2px solid #F40612;
}

Answer

Tried this?

.navbar-right {
   height: 68px;
   border-bottom: 2px solid #F40612;
}

Or

.navbar-right {
   height: 70px;
}

.navbar-nav li {
   background-color: #F40612;
   padding: 0;
   margin: 0;
   padding-bottom: 2px;
}

.navbar-nav li a {
   margin: 0;
   padding: 0;
   background-color: transparent;
}

or jQuery

<script>
  $(".active-page").parent().addClass("hightlight");
</script>

.hightlight {
   background-color: #F40612;
   padding: 0;
   margin: 0;
   padding-bottom: 2px;
}