Unsightly line under Bootstrap Collapse button

[CWebba1]

I am working on a website at http://craigwebbart.com/preblast

This website uses Bootstrap and WordPress. The top menu has a dark texture behind it.

When the menu is collapsed and the button is pressed, a hideous unsightly white line appears, crossing the logo.

I have tried to track down this artifact using chrome developer tools but I cannot find the culprit.

It seems like it ought to be the .navbar-header class or the button.

Like I say, I’m stumped. Has anyone ever put a BS menu on a dark background?

Thank you in advance for your help.

[RyanReese]

Hello. It’s the 1px border you set here.

.navbar-collapse {
overflow-x: visible;
padding-right: 15px;
padding-left: 15px;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}

The reason it’s white though (instead of transparent like this rule here says (if it was transparent it would be black or whatever)), is because the below code OVERRIDES the border-color and sets it to white.

.navbar-default {
background-color: transparent;
border-color: #FFF;
border: 0px;
margin-top: 12px;
}

[CWebba1]

Thank you for helping to track this down. I could not see it in Google chrome tools.