teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2020/06/02 03:33

投稿

dit.
dit.

スコア3235

answer CHANGED
@@ -4,4 +4,28 @@
4
4
  `#mainNav`にhideやshowのclassを付けるような形になっていますが、提示のcodepenでいえば`#header`に対して行うはずの部分です。
5
5
  もう一度見直されるか、一度codepenのコードをそのまま貼り付け、fontawesomeの読み込みとjQueryの読み込みをしたものが希望の動作になるのを確認してからidやclassを置換するのがいいと思います。
6
6
 
7
- ※時間があれば、質問に提示のコードを元に訂正したコードを回答に追記します。
7
+ ※時間があれば、質問に提示のコードを元に訂正したコードを回答に追記します。
8
+
9
+ ---
10
+ 追記
11
+
12
+ .mainBox-navの背景の下に#headerが潜り込んでいるのかもしれませんね。
13
+ ```css
14
+ .mainBox-nav{
15
+ background-color: #f1f4f5; /* これを消すと表示されるのがわかる */
16
+ font: 14px/28px 'Open Sans', sans-serif;
17
+ height: 650px;
18
+ width: 100%;
19
+ /* 背景色は付けたままで#headerを表示させたい場合は以下を追記で応急処置できるはず
20
+ position: relative;
21
+ z-index: 1;
22
+ */
23
+ }
24
+ ```
25
+
26
+ あと、ここの頭の`.`ついてなかったので`font-size`が効いてないです。
27
+ ```css
28
+ .nav-item i{
29
+ font-size:30px;
30
+ }
31
+ ```