显示：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没有影响导航栏

回答

相关问题