固定ナビを実装する方法

私はcodepenを使ってシングルページのポートフォリオを構築していましたが、固定ナビバーを作成してから、いくつかのセクションを作成したかったのです。 navbarを修正する必要があります。いくつかの不明な理由により、私のnavbarはそれ以上のスペースを取らなければならず、コンテンツはその上に表示されます。固定ナビを実装する方法

私はエラーを見つけられません、誰でも私を助けてくれるのですか？

body { 
 
    background-color: black; 
 
    font-size: 2em; 
 
    color: white; 
 
    height: 100vh; 
 
} 
 

 
a, 
 
a:hover, 
 
a:visited, 
 
a:link, 
 
a:active { 
 
    color: inherit; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
    animation-name: nav-link-hover; 
 
    animation-duration: 1.5s; 
 
    animation-fill-mode: forwards; 
 
    animation-timing-function: ease-out 
 
} 
 

 
nav { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: fixed; 
 
    top: 0; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    border-bottom: 1px dotted white; 
 
} 
 

 
main { 
 
    height: 100%; 
 
    margin-top: 50px; 
 
} 
 

 
section { 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: 1px solid red; 
 
} 
 

 

 
/** ANIMATION */ 
 

 
@keyframes nav-link-hover { 
 
    from { 
 
    color: white; 
 
    } 
 
    to { 
 
    color: LawnGreen; 
 
    } 
 
} 
 

 

 
/** MEDIA QUERY */ 
 

 
@media (min-width: 1200px) { 
 
    body { 
 
    width: 1140px; 
 
    max-width: 100%; 
 
    } 
 
}

<nav> 
 
    <a href="#me">Rob.dll </a> 
 
    <a href="#portfolio">Portfolio</a> 
 
</nav> 
 
<main> 
 
    <section> dada1 </section> 
 
    <section> dada2 </section> 
 
</main>

ここで私はあなたがブートストラップを使用している参照codepen

出典

2017-04-30 Koop4

私はそれ以上の任意のコンテンツを見ることができないです。あなたの問題を説明していただけますか？ – Nimish

'nav {}'スタイルに 'left：0;'が足りないのではないですか？ –

です。全幅ではない固定ヘッダーを使用するには、残りのコンテナーと整列させるためにメディア照会を使用する必要があります。だから私はメディアのクエリをブートストラップのコンテナに合わせて配置しなければならなかった。下記を参照してください。 https://codepen.io/blecaf/pen/PmmJav

body { 
 
    background-color: black; 
 
    font-size: 2em; 
 
    color: white; 
 
    height: 100vh; 
 
} 
 

 
a, 
 
a:hover, 
 
a:visited, 
 
a:link, 
 
a:active { 
 
    color: inherit; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
    animation-name: nav-link-hover; 
 
    animation-duration: 1.5s; 
 
    animation-fill-mode: forwards; 
 
    animation-timing-function: ease-out 
 
} 
 

 
nav { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: fixed; 
 
    top: 0; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    left: 0; 
 
    border-bottom: 1px dotted white; 
 
    
 
} 
 

 
main { 
 
    height: 100%; 
 
    margin-top: 50px; 
 
} 
 

 
section { 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: 1px solid red; 
 
} 
 

 

 
/** ANIMATION */ 
 

 
@keyframes nav-link-hover { 
 
    from { 
 
    color: white; 
 
    } 
 
    to { 
 
    color: LawnGreen; 
 
    } 
 
} 
 

 
.fixed-header { 
 
    max-width: 1110px; 
 
    width: 100%; 
 
    border: 1px yellow solid; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 

 
/** MEDIA QUERY */ 
 

 
@media (min-width: 576px) { 
 
    .fixed-header { 
 
    max-width: 510px; 
 
    } 
 
} 
 

 
@media (min-width: 768px) { 
 
    .fixed-header { 
 
    max-width: 690px; 
 
    } 
 
} 
 

 
@media (min-width: 992px) { 
 
    .fixed-header { 
 
    max-width: 930px; 
 
    } 
 
} 
 

 
@media (min-width: 1200px) { 
 
    body { 
 
    width: 1140px; 
 
    max-width: 100%; 
 
    } 
 
    .fixed-header { 
 
    max-width: 1110px; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body class="container"> 
 
<nav> 
 
    <div class="fixed-header"> 
 
    <a href="#me">Rob.dll </a> 
 
    <a href="#portfolio">Portfolio</a> 
 
    </div> 
 
</nav> 
 
<main> 
 
    <section> dada1 </section> 
 
    <section> dada2 </section> 
 
</main> 
 
<body>

出典

2017-04-30 18:47:35 blecaf

ありがとう、あなたは2つの問題の1つを解決しました。スクロールするときにセクション境界線がナビゲーションバーにオーバーレイする理由を知っていますか？ – Koop4

固定ヘッダクラスに背景色を付ける。更新されたコードコード – blecaf

固定ナビを実装する方法

答えて

関連する問題