スマホサイズに適用させるハンバーガーメニューのサイズが変更できません

画面幅670px以下のときのスマホで閲覧する際に、
ナビゲーションをハンバーガーメニューに変更し、
大きさも変更させたいのですが、うまくできません。

HTMLでのハンバーガーメニュー指定は、
spanタグで行なっており、divで囲み、親と子要素にして
flexbox指定を試みましたが、うまくできませんでした。

変更したい箇所を表した図と、
コードを添付いたしました。

よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html  lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>●○○○○</title>
7        <link rel="stylesheet" href="style.css">
8        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9    </head>
10    <body>
11        <header>
12            <div class="container">
13                <div class="wrapper">
14                    <div class="header-left">
15                        <img class="header-logo" src="images/●○○○○">
16                    </div>
17                    <span class="fa fa-bars menu-icon"></span>
18                    <nav>
19                        <a href="●○○○○">●○○○○</a>
20                        <a href="●○○○○">●○○○○</a>
21                    </nav>
22                </div>
23            </div>
24        </header>
25        <section class="top-wrapper">
26            <img class="top-img" src="images/●○○○○">
27        </section>
28    </body>
29</html>

CSS
1* {
2  box-sizing: border-box;
3}
4body {
5    margin: 0;
6    font-family: "Hiragino Mincho ProN";
7}
8a {
9    text-decoration: none;
10}
11.container {
12    max-width: 1170px;
13    width: 100%;
14    margin: 0 auto;
15}
16.wrapper {
17    height: 190px;
18    width: 100%;
19    display: flex;
20    justify-content: space-between
21}
22.header-left {
23    display: flex;
24    justify-content: flex-start;
25}
26.header-logo {
27    width: 110px;
28    padding: 40px 0;
29}
30.header-logo:hover {
31    cursor: default;
32}
33.menu-icon {
34  color: black;
35  font-size: 10px;
36  padding: 26px 0;
37  display: none;
38}
39nav {
40    display: flex;
41    justify-content: flex-end;
42    padding-top: 128px;
43}
44nav a {
45    color: black;
46    font-size: 18px;
47    font-weight: bold;
48    letter-spacing: 5px;
49    padding-left: 100px;
50}
51nav a:hover {
52    cursor: pointer;
53}
54.top-img {
55    height: 600px;
56    width: 100%;
57    object-fit: cover;
58}
59/*以下スマホサイズ*/
60@media(max-width:670px) {
61    nav {
62        display: none; 
63    }
64    .menu-icon {
65        display: block;
66    }
67}
68

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1.menu-icon {
2  background: blue;/* 質問の回答とはズレますが検証したい場所には色を仮付けすると分かりやすいです */
3  width: 200px;/* 大きさを調整したければ幅を指定しましょう */
4  color: black;
5  font-size: 100px;/* ハンバーガーメニューアイコンの大きさ調整お好みで */
6  padding: 40px 55px;/* ハンバーガーメニュー余白（位置）調整お好みで */
7  display: none;
8}

投稿2020/08/25 12:13

jinba

総合スコア310

user20

2020/08/25 12:39

jinba 様ご回答いただき、誠にありがとうございます。回答を踏まえてコードの修正を行なっているのですが、 widthやpaddingの設定で.menu-iconクラス持つ枠の幅を大きくすることはできるのですが、なぜかハンバーガーメニューアイコン自体の大きさが変わらないという現状です。 fontawesomeのメニューアイコンを指定していますが、どこかしらの数値を変えなければアイコン自体の大きさが変わらないなどの決まりごとがあるのでしょうか。もし、ご存知であれば教えていただけないでしょうか。お手数おかけしますが、よろしくお願いいたします。

jinba

2020/08/25 12:42

font-sizeで大きさ変わらないですか？

user20

2020/08/25 12:56

font-sizeの値を大きくしても変わらないです。また、CSSでmenu-iconのdisplay:noneとして、スマホサイズのときdisplay:blockとしているのですが、パソコンのサイズで表示した時からmenu-iconが出ている状況です。 HTML,CSSのコードを見直しているのですが、原因がわからないという感じです。

jinba

2020/08/25 13:03

cssには優先順位があり本番用のソースではどこかでfont-sizeが上書きされて無効になっている可能性がありますcss優先順位を上げる手段としまして優先順位上げる方法１!importantをつけて優先度を上げる font-size: 100px !important; 優先順位上げる方法２!htmlへスタイルを適用する <span class="fa fa-bars menu-icon" style="font-size:100px"></span> どちらかで対応できるのではと思われますまた、display:noneなのに表示される件こちらでは質問のソースで検証しましたが問題なさそうですキャッシュのクリアなど試しても駄目でしょうか？

user20

2020/08/25 13:20

「!important」を使用してアイコンサイズを変化させることができました。 display:noneでも表示される件も、「!important」で修正ができました。 cssの優先順位について学習していこうと思います。本日は、遅い時間まで対応していただき、誠にありがとうございました。ベストアンサーとさせていただきます。

jinba

2020/08/25 13:29

解決されたようでよかったです !importantで解決されたようですのでfontawesomeのcssより優先順位が低くなっていたことが原因ですね今回はfontawesomeよりも優先度が上がればいいだけですので!importantで問題ないと思いますが !importantは使いすぎると以下URLのような事態にもなりかねないのでお気を付けください https://qiita.com/yamamoto_hiroya/items/943045c649a38640c790

user20

2020/08/25 15:22

リンク先を添付していただき、ありがとうございます。とても参考になります。色々と参考にしつつ、学習を続けていこうと思います。また、何かで質問をした際など機会があれば、よろしくお願いいたします。

行動規範の内容に同意します