display：noneナビゲーションバーに影響しません

Question

navbarのテキストリンクをアイコンの文字に変更するためにメディアクエリを使用しようとしていますが、これはdisplay:noneを利用していますが、私が現在使っているように機能しません。

私はまた、表示クラスfa fa-homeなど

.firstnav { 
 
    display: inline; 
 
} 
 

 
.secondnav { 
 
    display: none; 
 
} 
 

 
@media only screen and (max-width: 630px) { 
 
    .firstnav { 
 
    display: none; 
 
    } 
 
    .secondnav { 
 
    display: inline; 
 
    } 
 
}

<nav class="topnav" id="myTopnav"> 
 
    <a href="#home"> 
 
    <p class="firstnav">Rob Hern</p> 
 
    <p class="secondnav poppins">RH</p> 
 
    </a> 
 
    <a href="#home"> 
 
    <p class="firstnav">Home</p> 
 
    <p class="secondnav fa fa-home"></p> 
 
    </a> 
 
    <a href="#portfolio"> 
 
    <p class="firstnav">Portfolio</p> 
 
    <p class="secondnav fa fa-code"></p> 
 
    </a> 
 
    <a href="#contact"> 
 
    <p class="firstnav">Contact</p> 
 
    <p class="secondnav fa fa-envelope-o"></p> 
 
    </a> 
 
    <a href="#about"> 
 
    <p class="firstnav">About</p> 
 
    <p class="secondnav fa fa-user"></p> 
 
    </a> 
 
</nav>

を使用してフォント恐ろしいのアイコンフォントを使用しています： Full size screen With media query size screen

ありがとうございます！

Answer 1

font-awesomeアイコンが表示されているので1つの以上の条件に

.secondnav.fa{ display:none} 
@media only screen and (max-width: 630px) { 
.secondnav.fa { 
    display: inline; 
    } 
} 

を追加しますので、あなたがあなたのp tags .secondnav class.

と直接それらを使用しているようにそれらを上書きするインラインブロック デフォルトによってを持っています

以下は動作中のスニペットです。

.firstnav { 
 
    display: inline; 
 
} 
 

 
.secondnav { 
 
    display: none; 
 
} 
 

 
.secondnav.fa { 
 
    display: none; 
 
} 
 

 
@media only screen and (max-width: 630px) { 
 
    .firstnav { 
 
    display: none; 
 
    } 
 
    .secondnav { 
 
    display: inline; 
 
    } 
 
    .secondnav.fa { 
 
    display: inline; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<nav class="topnav" id="myTopnav"> 
 
    <a href="#home"> 
 
    <p class="firstnav">Rob Hern</p> 
 
    <p class="secondnav poppins">RH</p> 
 
    </a> 
 
    <a href="#home"> 
 
    <p class="firstnav">Home</p> 
 
    <p class="secondnav fa fa-home"></p> 
 
    </a> 
 
    <a href="#portfolio"> 
 
    <p class="firstnav">Portfolio</p> 
 
    <p class="secondnav fa fa-code"></p> 
 
    </a> 
 
    <a href="#contact"> 
 
    <p class="firstnav">Contact</p> 
 
    <p class="secondnav fa fa-envelope-o"></p> 
 
    </a> 
 
    <a href="#about"> 
 
    <p class="firstnav">About</p> 
 
    <p class="secondnav fa fa-user"></p> 
 
    </a> 
 
</nav>

Answer 2

インラインブロックを使用しようとしましたか？

Answer 3

あなたのコードは正常に動作します。あなたはそれを見ることができますhere。垂直ハンドラで遊ぶ。そして、あなたはそれが動作するのを見るでしょう。

Note : Have you tried clearing your browser's cache?