display:none 不影响导航栏

Question

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

谢谢！

Answer 1

您尝试过使用内联块吗？

Answer 2

再添加一个条件

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

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

一起使用

Below is a working snippet .

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

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

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

display:none 不影响导航栏

display:none not impacting on navigation bar

html

css

mobile

media-queries

display