ヘッダー メニューアイコン

Question

icon-menuタグが、display:noneにしても消えなくて困っています。（pcサイズ）
menu-iconのタグを取ってもあります、、、iphoneの時だけ表示させたいです。

コード <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="">
        </div>
          <span class="fa fa-bars menu-icon"></span>
        <div class="header-right">
          <a href="#">レッスン</a>
          <a href="#">新規登録</a>
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>

コードheader {
  height: 65px;
  width: 100%;
  background-color: rgba(255, 221, 35, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  margin-right: -25px;
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
  float: left;
  transition: all 0.5s;
}

.header-right a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.menu-icon {
  color: white;
  float: right;
  font-size: 25px;
  padding: 21px 0;
  display:none;
}

Answer 1

おそらく詳細度の問題だと思うのですが、!important はお試しになりましたか？

!important 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。

詳細度 - CSS: カスケーディングスタイルシート | MDN

Comments

[Mi63203822]

!importantとは何でしょう、、、試していないです

[Lhankor_Mhy]

ええと。
回答にも書きましたが、「CSS 内で作られたその他の宣言を上書き」するものです。
不明な点はどこでしょう？

[Mi63203822]

使い方がよくわからなかったので質問しました！グーグルで調べたんですけど、cssのタグの最後にこの!important と打つことが重要ということでしょうか？
とりあえず消えました！

[Lhankor_Mhy]

はい、回答のリンク先にも書いてありますが、そういう使い方です。

[Mi63203822]

こうすると逆に、画面を小さくした際も反映されて、消えているままでした

[Lhankor_Mhy]

はい、ですので、小さくしたときには表示するようにしてください。

[Mi63203822]

一応、display:block としてあるのですが反映しないので質問させて頂きました

[Lhankor_Mhy]

回答に書いたリンク先にも書いてあるのですが、!important を上書きするには、!importantを書いて、そのルールの後に書くかまたは詳細度を高めて書くかする必要がありますよ。

せっかく回答をしたので、できれば回答に書いてあることは読んでいただきたいのですが、難しいですか？

[Mi63203822]

全て読ませていただいていますよ。リンクは説明がうまくまとまっていないので違うサイトを参考にしました。

[Lhankor_Mhy]

そうでしたか、参考になるサイトが見つかってよかったですね。

ただ、そのサイトには、!important の上書き方法が書いていないご様子ですから、「!important 上書き」などでググってみてはいかがですか？