display:none 不影响导航栏答案

【问题标题】：display:none not impacting on navigation bardisplay:none 不影响导航栏
【发布时间】：2017-04-07 22:59:43
【问题描述】：

我正在尝试使用媒体查询将导航栏中的文本链接更改为使用 display:none 的较小屏幕上的图标字体字符，但它无法正常工作，因为我目前正在使用它。

我也在使用 Font Awesome 的图标字体，使用 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

谢谢！

【问题讨论】：

您提供的代码有效：jsfiddle.net/3o62mtdg
调整浏览器大小。有用。 :)
@VincentG Font Awesome 图标出现了

标签： html css mobile media-queries display

【解决方案1】：

再增加一个条件

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

因为font-awesome 图标是display:inline-block 默认，所以你必须覆盖它们，因为你直接使用它们你的p tags .secondnav class.

下面是一个有效的 sn-p 。

.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>

【讨论】：

这对我来说非常有用，感谢 Sahil 的解释！
不客气 :) 请接受答案并点赞 :)

【解决方案2】：

你尝试过使用 inline-block 吗？

【讨论】：

【解决方案3】：

您的代码运行良好。你可以看到它here。玩垂直处理程序。你会看到它有效。

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

【讨论】：

不，它不是 @Ruzgar 尝试包括 font-awesome 库.. 然后你就会明白这个问题了。
@Sahil Dhir 我已经做过了，如果您查看左侧面板，您可以将其视为外部资源。如果我没有，图标根本不会显示。但是，如果再添加一个条件就可以了。没关系。