顯示：none沒有影響導航欄

我試圖使用媒體查詢來更改導航欄中的文字鏈接到較小的屏幕上的圖標字體字符利用display:none但它不工作，因爲我目前正在使用它。顯示：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

謝謝！

來源

2017-04-07 Rob Hern

您提供的代碼工作：https：//jsfiddle.net/3o62mtdg/ –

調整您的瀏覽器。有用。 :) –

@VincentG字體真棒圖標顯示了 –

添加一個條件

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

因爲font-awesome圖標顯示：inline-block的默認所以你必須覆蓋他們爲您直接使用它們與你的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>

來源

2017-04-07 11:58:56

這對我完美的工作，謝謝解釋Sahil！ –

歡迎您:)請接受答案並註冊成爲會員:) –

您是否嘗試過使用內聯塊？

來源

2017-04-07 11:58:46

你的代碼工作正常。你可以看到它here。玩垂直處理程序。你會看到它的作品。

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

來源

2017-04-07 12:13:48

不是@Ruzgar嘗試包括font-awesome圖書館..然後您將理解這個問題。 –

@Sahil Dhir 我已經做了，如果你看左面板，你可以看到它是一個外部資源。如果我沒有，圖標不會顯示。但是，如果再添加一個條件的伎倆。那沒問題。 –

顯示：none沒有影響導航欄

回答

相關問題