CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
WhiteRau
WhiteRau

Reputation: 857

Bootstrap Navbar has strange hairline border

i have tried everything to get rid of this bloody hairline, including the techniques from this post and this post but no soap. here's an image of what i am dealing with:

white hairline border on navbar

it crosses the entire header of the page and for the love of everything webby, i cannot locate where it is coming from! just basic navbar with a transparent background. i've plumbed the entire CSS listing in devtools and the closest thing i found was a border-color on .navbar-default .navbar-collapse, .navbar-default .navbar-form, which i tried changing to no effect.

any enlightenment is most welcome at this stage. TIA!

WR!

Upvotes: 1

Views: 309

Answers (1)

Don't Panic
Don't Panic

Reputation: 14520

.navbar-default has a box-shadow, which is what you can see:

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);

Override it in your own CSS to get rid of that line:

-webkit-box-shadow: none;
box-shadow: none;

Here's a Codepen.

Upvotes: 2

Related Questions