移动端toggle导航按钮不显示 无法同时适配双端样式问题咨询

核心问题原因 #

你当前的max-width: 750px移动端媒体查询被嵌套在了min-width: 950px的桌面端媒体查询内部，两种宽度条件不可能同时满足，所以移动端的toggle按钮显示规则永远不会生效，这就是保留750px查询时按钮不显示、删除后反而能展示的根本原因。

修复步骤 #

1. 调整CSS媒体查询结构 #

将max-width: 750px的移动端规则从桌面端媒体查询代码块中移出，作为独立规则，同时修正原有样式的冲突和语法错误，修正后的完整CSS如下：

/*----- 全局基础样式 -----*/
.toggle-nav {
    display: none;
}
.menu {
    width: 100%;
    text-align: center;
    border-radius: 2px;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
    background-color: cadetblue;
}
.title {
    display: inline-block;
    border-top: 5px solid black;
    border-radius: 0px;
    color: azure;
    font-family: monospace;
}
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu a {
    text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
    transition: color linear 0.15s;
    text-decoration: none;
}
.menu a:hover, .menu .current-item a {
    color: #66a992;
}

/*----- 1150px以下适配 -----*/
@media screen and (max-width: 1150px) {
  .wrap {
    width: 90%;
  }
  .title {
    margin-bottom: 5px;
  }
}

/*----- 950px以上桌面端样式 -----*/
@media screen and (min-width: 950px) {
  .title {
    font-size: 30px;
  }
  .menu ul {
    display: inline-block;
  }
  .menu li {
    margin: 0px 50px 0px 0px;
    float: left;
    font-size: 17px;
    margin-top: 10px;
  }
  .menu li:last-child {
    margin-right: 0px;
  }
  .menu a {
    color: black;
    font-size: 20px;
  }
}

/*----- 750px以下移动端样式 -----*/
@media screen and (max-width: 750px) {
  .menu {
    position: relative;
  }
  .menu ul.active {
    display: none;
  }
  .menu ul {
    width: 20%;
    position: absolute;
    top: 10%;
    right: 10px;
    padding: 10px;
    border-radius: 3px;
    background: aliceblue;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
  }
  .menu ul:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0%;
    right: 22px;
    content: '';
    transform: translate(0%, -100%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid aliceblue;
  }
  .menu li {
    margin: 5px 0;
    float: none;
    display: block;
  }
  .toggle-nav {
    padding: 10px;
    display: inline-block;
    border-radius: 3px;
    background: white;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
    color: black;
    font-size: 30px;
    transition: color linear 0.15s;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
    float: right;
    margin: 10px;
  }
  .toggle-nav:hover, .toggle-nav.active {
    text-decoration: none;
    color: #66a992;
  }
}

2. 修正HTML语法错误 #

原有HTML中存在无效<link>标签、嵌套不规范的问题，修正后的代码如下：

<!-- Header -->
<nav class="menu"> 
  <div class="title">CitizensSalon
    <ul class="active">        
      <li><a href="Writings.html">Blog</a></li>
      <li><a href="Policy.html">Policy Proposals</a></li>
      <li><a href="Projects.html">Projects</a></li>
    </ul>
  </div>
  <a class="toggle-nav" href="#">&#9776;</a>
</nav>

内容的提问来源于stack exchange，提问作者Jack