CODEWITHSUNDEEP
css
user4419336
user4419336

Reputation:

Change the button border when active nav tabs

I am using nav-tabs in with bootstrap panel.

On the panel header when the first button is active the border is thicker on left side and top.

Question: What ever button is active how can I make sure it does not show double thickness in border.

JSFiddle Example

enter image description here

.panel.with-nav-tabs .panel-heading {
    padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
    border-bottom: none;
}

.panel.with-nav-tabs .nav-justified{
    margin-bottom: -1px;
}

.panel.with-nav-tabs .panel-heading {
    background-color: #fafbfc;
    border-bottom: 1px solid #e1e4e8;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding-left: 0;
    padding-top: 0;
}

.panel.with-nav-tabs .nav-tabs > li > a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus {

}

HTML

<div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
    <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
    <li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
    </ul>
    </div>
    <div class="panel-body">
    <div class="tab-content">
    <div class="tab-pane fade in active" id="tab1default">Default 1</div>
    <div class="tab-pane fade" id="tab2default">Default 2</div>
    </div>
    </div>
</div>

Upvotes: 0

Views: 2279

Answers (1)

Andrei V
Andrei V

Reputation: 7486

What you're seeing is the border set on the panel heading, combined with individual borders set on the tab (labels). You need to explicitly disable the borders on the tabs:

/*disable the top border on all tabs*/
.panel.with-nav-tabs .nav-tabs > li > a {
   border-top: none;
}

/*the first tab has an additional left border which is not needed
  since it can "take" the border of the header*/
.panel.with-nav-tabs .nav-tabs > li:first-of-type > a {
   border-left: none;
}

Check out this fiddle.

In case you'll have more tabs and they'll run up to the right side of the panel, you might add an additional rule for the "last-of-type" and take out the right border.

Upvotes: 1

Related Questions