3

私は現在、最初のレスポンシブ Web サイトを構築しています。

タブレット、ラップトップ、デスクトップでの使用の場合、ナビゲーションは「スティッキー」で、思い通りに機能します。

それより小さいディスプレイの場合、ナビゲーションは典型的な「ハンバーガー メニュー」内に隠され、クリックするとナビゲーションが表示されます。

これはすべて正常に機能しますが、私の問題は「バーガークリック」時のナビゲーションの表示にあります。ナビゲーションはヘッダーの上に表示され、コンテンツは下に表示されます。コンテンツを画面の横に押したり下に押したりするのではなく、デフォルトでそうなっていると思います。

問題はポジショニングに関係していると思いますが、何に指を置くことができません。通常の応答状態で表示されたときの私のナビゲーション要素の位置は次のとおりです。

/* HEADER & NAV
--------------------------*/
header {
    height: 140px;
    position: relative;
    background-image: url("../img/headerback.jpg");
    text-align: center;
    padding-top: 1.4em;
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
}

header a {
    font-size: 4.8em; 
    border-bottom: solid 5px #b9beaa;
}

header a, nav li, footer, footer a {
    text-decoration: none;
    color: #fff; 
}

nav {
    height: 36px;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.245em;
    padding-top: 2.5em;
}

nav li {
    display: inline;
    padding: 0 0.6em 0 0.7em;
}

nav li a {
    border: none;
    letter-spacing: 2px;
    position: relative;
}

/*----------------- Responsive Nav */
    nav ul {
        display:none;
    }
    nav a#navIcon{
        position: absolute;
        right: 20px;
        top: 20px;
        border-bottom: none;
    }
    nav {
        font-size: 0.6em;
    }
    nav li {
        display: block;
        padding-bottom: 0.6em;
    }
header a {
        font-size: 1.6em;
    }

これは、JSFiddle を使用する最初の試みでもあります。

他に何かを提供する必要がある場合は、お問い合わせください。

助けてくれてありがとう。

https://jsfiddle.net/AlexEd/5a98ttq8/

4

1 に答える 1