html - レスポンシブ Web サイトの重複

Question

ウェブサイトをレスポンシブにしようとしています。ウィンドウを小さくすると、ナビゲーション リンクが左側のロゴに重なることを除いて、ほぼ完了です。こちらをご覧ください 。ウィンドウのサイズを変更するときに、ナビゲーション バーをロゴの下に移動するにはどうすればよいですか? 助けてくれてありがとう

Answer 1

あなたのコードをいじってみたところ、最初に見つけたのは 2 つの #nav ID でした。ページごとに一意の ID を 1 つだけ持つ必要があります。

ただし、主な問題は、ナビゲーション項目の位置が固定されていることです。これにより、ナビゲーションが常にロゴの上を行進します。固定位置はドキュメント フローを無視し、どこにでも配置します。

ナビゲーションをドキュメント フローに戻す必要があります。ナビゲーション項目を相対的なものに変更し、上部の位置を調整します。

これらをブレーク ポイントに関連する新しいメディア クエリに配置する必要があります。これらの配置スタイルもすべて削除する必要があります。これで途中までいけるはずです。もっと助けたいのですが、ラム酒とコーラをもらったばかりなので、今はやめたほうがいいです。

スティーブ

Answer 2

ロゴを下に移動するか、ロゴの上にスペースを作成して、そのスペースにリンクを配置します。

Answer 3

positionプロパティとともに多くの属性を変更する必要がありfloatます - 私はサイトで CSS をいじってみましたが、これが私が変更したものです:

#topBar {
    height: 300px;
}
.BODYcontainer {
    margin-top: 300px;
}
.container .columns {
    float: none;
}
.container .columns.logoBox {
    left: 0;
    position: relative;
    display: block;
    float: none;
    margin-bottom: 50px;
}
#nav {
    position: relative;
    float: none;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    display: block;
}
#companyNav {
    float: none;
    position: relative;
    top: 0;
}