CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
fumeng
fumeng

Reputation: 1820

Adding a border around .nav-tabs doubles up top border for .active class

I've done a lot of research and can't come up with an elegant solution to this issue.

What I'd like is a border around my nav buttons so I do this: 

.nav-tabs{border:1px solid #ddd;}

The problem is the active class appears to double up my top border (and my left border for the left-most tab). I try to undo it like this: 

.nav-tabs > li.active{border-top-style:none;}

This removes the top border but then adds a bottom border.

I've seen the solutions for then setting the border bottom to the background color of the tab content while also maintaining a margin-bottom of -3px. But that is not working for me.

How can I add a border around my nav buttons without the .active state doubling them up?

Thanks for any helpful solutions.

Here's a link to the fiddle: https://jsfiddle.net/43zzpvg2/

Upvotes: 1

Views: 1682

Answers (2)

Graham Walters
Graham Walters

Reputation: 2064

Without seeing what you've got, try this

.nav-tabs > li.active{border-top-color: transparent;}

In the past I've experienced the tabs moving when the border is removed.

I built something similar to what you're after here

Upvotes: 1

Jay
Jay

Reputation: 1678

Try adding !important like below

.nav-tabs .active {border-top: none!important}

Upvotes: 0

Related Questions