Wie entferne ich die weiße Linie unter der Navigationsleiste

Question

Ich verwende die Creative Thema von Start Bootstrap und ich möchte die weiße Linie unter der Navigationsleiste entfernen. Wie mache ich das?

HTML:

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> 
      </button> 
      <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a class="page-scroll" href="#about">About</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#services">Services</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#portfolio">Portfolio</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

CSS:

.navbar-default { 
    background-color: white; 
    border-color: rgba(34, 34, 34, 0.05); 
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
    -webkit-transition: all 0.35s; 
    -moz-transition: all 0.35s; 
    transition: all 0.35s; 
} 
.navbar-default .navbar-header .navbar-brand { 
    color: #F05F40; 
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
} 
.navbar-default .navbar-header .navbar-brand:hover, 
.navbar-default .navbar-header .navbar-brand:focus { 
    color: #eb3812; 
} 
.navbar-default .navbar-header .navbar-toggle { 
    font-weight: 700; 
    font-size: 12px; 
    color: #222222; 
    text-transform: uppercase; 
} 
.navbar-default .nav > li > a, 
.navbar-default .nav > li > a:focus { 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 13px; 
    color: #222222; 
} 
.navbar-default .nav > li > a:hover, 
.navbar-default .nav > li > a:focus:hover { 
    color: #F05F40; 
} 
.navbar-default .nav > li.active > a, 
.navbar-default .nav > li.active > a:focus { 
    color: #F05F40 !important; 
    background-color: transparent; 
} 
.navbar-default .nav > li.active > a:hover, 
.navbar-default .nav > li.active > a:focus:hover { 
    background-color: transparent; 
} 
@media (min-width: 768px) { 
    .navbar-default { 
    background-color: transparent; 
    border-color: rgba(255, 255, 255, 0.3); 
    } 
    .navbar-default .navbar-header .navbar-brand { 
    color: rgba(255, 255, 255, 0.7); 
    } 
    .navbar-default .navbar-header .navbar-brand:hover, 
    .navbar-default .navbar-header .navbar-brand:focus { 
    color: white; 
    } 
    .navbar-default .nav > li > a, 
    .navbar-default .nav > li > a:focus { 
    color: rgba(255, 255, 255, 0.7); 
    } 
    .navbar-default .nav > li > a:hover, 
    .navbar-default .nav > li > a:focus:hover { 
    color: white; 
    } 
    .navbar-default.affix { 
    background-color: white; 
    border-color: rgba(34, 34, 34, 0.05); 
    } 
    .navbar-default.affix .navbar-header .navbar-brand { 
    color: #F05F40; 
    font-size: 14px; 
    } 
    .navbar-default.affix .navbar-header .navbar-brand:hover, 
    .navbar-default.affix .navbar-header .navbar-brand:focus { 
    color: #eb3812; 
    } 
    .navbar-default.affix .nav > li > a, 
    .navbar-default.affix .nav > li > a:focus { 
    color: #222222; 
    } 
    .navbar-default.affix .nav > li > a:hover, 
    .navbar-default.affix .nav > li > a:focus:hover { 
    color: #F05F40; 
    } 
} 

Ich bin mir nicht sicher, ob ich hier alle den Code geschrieben haben. Wenn nicht, können Sie immer auf die Website verweisen und den Code herunterladen. Vielen Dank!

Answer 1

Die weiße Linie wird vom Bootstrap css definiert. Also, Sie müssen es überschreiben. Wie folgt aus:

.navbar-default{ 
    border:none; 
} 

Answer 2

versuchen, dies auch:

.navbar-default { 
     border: 0; 
    }