显示:无 不影响导航栏

Question

我正在尝试使用媒体查询将导航栏中的文本链接更改为利用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>

查看方式：全尺寸屏幕使用媒体查询大小屏幕

谢谢！

Answer 1

再添加一个条件

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

因为默认情况下font-awesome图标是显示：内联块的，所以你必须覆盖它们，因为你直接用你的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

你的代码工作正常。你可以在这里看到它。使用垂直处理程序。你会看到它有效。

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