2016-08-08 5 views
0

スタートブートストラップからCreativeテーマを使用していますが、ナビゲーションバーの下にある白い線を削除します。それ、どうやったら出来るの?ナビゲーションバーの白い線を削除するには

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; 
    } 
} 

私はここにすべてのコードを掲載しましたかはわかりません。そうでない場合は、いつでもウェブサイトを参照してコードをダウンロードすることができます。ありがとうございました!

+0

を白線おそらくブートストラップによって追加されます。要素を調べて、問題の原因となっているCSSルールを確認したい場合があります。 – Mox

+0

どのように知っていますか?私は完全にコーディングに新しいです – youknowwho

+0

Googleのhtml要素を調べる方法 – Mox

答えて

1

白い線は、ブートストラップCSSによって定義されます。だから、それはあなたのCSSを上書きする必要があります。このように:

.navbar-default{ 
    border:none; 
} 
0

も、この方法を試してください。

.navbar-default { 
     border: 0; 
    } 
関連する問題