为什么我的粘性导航栏在移动设备上不起作用？

Question

我正在制作我的第一个投资组合网站。我创建了这个导航条，它似乎工作，直到我最终测试了它与chrome开发工具。我试着隔离导航栏，它似乎有同样的问题。当我在移动设备上向下滚动时，它不会粘在顶部，但当我向上滚动时，它会粘在那里。超级令人沮丧，但我会坚持下去。

这是代码笔https://codepen.io/kylemt03/pen/WNKEZjg

/* Nav */
nav {
display:flex;
justify-content:space-around;
align-items:center;
min-height:8vh;
background-color:var(--blue);
position:sticky;
top:0;
z-index:1;
box-shadow:1px 1px 2px rgb(0 0 0 / 50%);
width:100%;
}
.logo {
color:var(--white);
text-transform: uppercase;
letter-spacing: 8px;
font-size:3em;
text-shadow:gray 2px 2px 4px;
}
.logo a {
color:var(--white);
}
.nav-links {
display:flex;
flex-direction: row;
justify-content: space-around;
width: 45%;
letter-spacing:2px;
font-size:1em;
list-style: none;
align-items: center;
}
.nav-links li {
display:inline-block;
}
.fancy-links {
color:var(--white);
position: relative;
}
.nav-links a {
color:var(--white);
}
.fancy-links::after {
content:"";
position: absolute;
left:0px;
bottom:0px;
width:100%;
height:2px;
background:currentColor;
transform:scaleX(0);
transform-origin: right;
transition:all 0.4s ease-in-out;
}
.fancy-links:hover::after {
transform:scaleX(1);
transform-origin: left;
}
.fa-brands {
font-size:1.25em;
}
/* Burger Menu */
.burger {
display:none;
}
.burger div {
width:25px;
height:5px;
background-color:white;
margin:5px;
}

的所有代码，请参阅代码。这里太多了。

任何帮助都是感激的!

我已经尝试删除一些位，现在隔离到导航栏。结果似乎是一样的。我特别尝试在导航链接中删除幻灯片，但这也没有改变

的行为。这是我第一次发帖，如果帖子看起来很糟糕，这就是为什么!

Answer 1

我无法复制我的问题，但我有一个猜测:

在你的代码依存中有这样一行:overflow-x: clip, hidden;，这是无效的CSS，但你的移动浏览器可能会以某种方式解释它，允许overflow-x: hidden;应用，这将阻止position: sticky按你想要的方式工作。

去掉这一行，看看效果如何。