小型设备上的css下拉菜单问题

Question

我正在尝试在我的 iPhone 媒体查询上设置一个修复菜单。只要我在页面顶部单击菜单，它就可以正常工作，但是一旦我向下滚动页面然后单击菜单，它就不会正确折叠，直到我向后滚动再次回到页面顶部。 除了 480px 及以下的媒体查询外，它在所有其他媒体查询上都能正常工作。这是sample page。

-苏海尔

Answer 1

您将要在 .menu-button 上设置 z-index

.menu-button {
position: fixed;
width: 100%;
top: 0;
left: 0;
display: block;
padding: 1em;
background: #ff8400;
color: #222222;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
z-index: 99; <-- HERE
}

此外，您还需要更改页边距以将您的第一个菜单项“博客”移动到新的顶部菜单 li 下方

更新：
是的，要获得边距，请在 .flexnav.flexnav-show 中添加 52px 的边距：

.flexnav.flexnav-show {
max-height: 2000px;
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
margin-top: 52px; <-- HERE
}

要让文章向下移动，请在第一个 p 中添加填充。将此添加到最低的媒体查询中：

p:first-child {
   margin-top: 50px;
}