Reputation: 75
I'm trying to create a navbar using bootstrap, but I can't seem to get rid of the small space beneath each tab. Can anyone help?
Code:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Baseline Assessment</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active"><a href="#verifyPanel" aria-controls="verifyPanel" role="tab" data-toggle="tab">Step 1: Verification</a></li>
<li><a href="#parqPanel" aria-controls="parqPanel" role="tab" data-toggle="tab">Step 2: Par-Q</a></li>
<li><a href="#exercisePanel" aria-controls="exercisePanel" role="tab" data-toggle="tab">Step 3: Exercise History</a></li>
<li><a href="#decisionPanel" aria-controls="decisionPanel" role="tab" data-toggle="tab">Step 4: Decision</a></li>
</ul>
</div>
</nav>
Thanks.
Upvotes: 0
Views: 116
Reputation: 76607
Apply Padding Adjustments
Try making the padding large enough to match your navbar-brand
element which is explicitly making the menu larger due to it's height of 50px
:
.nav>li>a {
position: relative;
display: block;
/* Adjusting this from 10px 15px to 15px should push the rows down */
padding: 15px;
}
You can see an example of what this change looks like below :
Consider Responsive Utility Classes
You might also consider performing some type of truncation of the content of your menu items as well, as smaller resolutions will result in a "wrapping" effect. Bootstrap's available responsive utility classes can help mitigate this issue :
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active">
<a href="#verifyPanel" aria-controls="verifyPanel" role="tab" data-toggle="tab">
<span class='hidden-sm'>Step 1: Verification</span>
<span class='visible-sm'>Verification</span>
</a>
</li>
<!-- Do this for each <li> element -->
</ul>
You can see this in action here and demonstrated below :
Upvotes: 1