Bootstrap 4のNavbarオーバーラップコンテンツ

Question

私のポートフォリオページにはスティッキーなNavbarがありますが、Navbarリンクをクリックすると各セクションのテキストが重なります。約、それはテキストをオーバーラップします。 「ポートフォリオ」と「約」では、両方のタイルに重なります。私は、各セクションのいくつかのパディングトップを無駄に補うようにしました。ここで

は完全なナビゲーションバーです：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #fc7a57;"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
     <a class="navbar-brand mr-auto navfont" href="#">portfolio.</a> 

      <ul class="nav navbar-nav"> 
       <li class="nav-item"> 
        <a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a> 
       </li> 

       <li class="nav-item"> 
        <a class="nav-link text" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a> 
       </li> 

       <li class="nav-item"> 
        <a class="nav-link text" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a> 
       </li> 

      </ul> 
    </nav> 

そして、ここのセクション

#contact { 
    background-color: #466365; 
    width: 100%; 
    height: 100%; 
    padding-top:50px; 
    color: white; 
} 

https://codepen.io/pablovester/pen/ZKJxLL

のいずれかのCSSコードだが、みんな

Answer 1

私が見る最初のもの間違ったあなたはスタイル要素にIDを使用しているで、NO、クラスを使用します。 1つ以上の要素でID "portfolio"を使用していますが、Idはドキュメント内で一意である必要があります。とにかくちょうどmargin-top: 100px;を追加するには、問題を解決する は

.portfolio { 
    background-color: #bcd39c; 
    width: 100%; 
    height: 100%; 
    padding-top:50px; 
    margin-top:100px; 
} 

十分とhtml他の必要なIDSで

<div id="portfolio" class="portfolio"> 

ともにクラスを追加します。 お手伝い願います！ 私はこのサイトで働いており、あなたが達成しようとしているものを正確にしました。check it out

Answer 2

ありがとうを見てみましょうこのHTMLソースを確認してください。 CSSとJavascriptの設定セクションですべてのリンクをコピーすることを忘れないでください。

https://codepen.io/danogliari/pen/gWQWqo

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     <a class="navbar-brand" href="#">Daniel Ogliari</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-right" id="navbarCollapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#about">About</a></li> 
      <li><a href="#profile">Portfolio</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav>