プログラミングを勉強中のみなさん、こんにちは!
今回は、ヘッダーを固定したら、メニューが左寄せになってしまった!
というエラーの解決方法を紹介します。
とっても簡単ですので、是非参考にしてください。
初心者向けのメモ書きとして執筆しておりますので、あしからず。
実体験
過去に、ポートフォリオ用にデモサイトを作成していたときです。
「ようし、ヘッダー完成!」
(左端)ロゴ・・・・・・(右端)メニュー1メニュー2メニュー3
こんな感じです。
「あ、そうだ、スクロールしてもヘッダーが見えるように位置を固定しておこう」
得意気にCSSで「position:fixed;」を設定しました。
完璧、と思い、実際にプレビューを見てみると、
「あれ、ヘッダーのロゴとメニューが左寄せになってる!!」
「ロゴが左端、メニューは右端に設定したはずなのに・・・」
(左端)ロゴ メニュー1メニュー2メニュー3
こんなエラーでした。
解決コード
CSSの「position:fixed;」の次に、
「width:100%;」
を追記してください。
positionを固定すると、どうやら幅を認識しなくなるみたいです。
まとめ
いかがでしたでしょうか。
ほとんどの方が、ヘッダーでflexをすると思いますので、
「position:fixed;」と「width:100%;」は、
セットで覚えておくといいかもしれませんね。
ヘッダー関連の記事も紹介しておきます。 続きを見る
【CSS】ヘッダーの固定は position:fixed; 上部にすきまができたらtop:0