Question

我正在为我公司网站atm的导航栏工作。我们使用wordpress作为基本内容，导航栏必须用css和html手动编码。在这里，你有一个目前正在工作的网站： 链接不可用 在桌面上，网站运行得很好，但在移动设备上我们遇到了一些问题。

当点击其中一个li元素时，该网站会向下滚动到特定产品。在移动浏览器上执行此操作一直有效，直到您自己滚动并单击另一个li元素。然后ul的内容将消失，但li元素仍然可以点击。再次滚动会让元素出现。

这是导航栏的代码段：

＆＃13;

.kategorien{
 position: fixed;
 list-style-type: none;
 margin: 5px;
 padding: 0;
 overflow: hidden;
 overflow-y: hidden;
 overflow-x: scroll;
 background-color: #888;
 text-decoration: none;
 min-width: 100%;
 width: 18%; 
 height: 86px; 
 text-align: center; 
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;
 &::-webkit-scrollbar {
 }
}

.kategorien .link{
 background-size: 100px, 100%;
 background-repeat: no-repeat;
 text-align: center;
 text-decoration: none;
}
.link1{
 background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/05/Icon_mechatronische-Bauteile.png);
}
.link2{
 background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/05/Icon_Tuer.png);
}
.link3 {
 background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/08/Schloss-e1503557362607.png);
}
.link4 {
 background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/05/Icon_sitz.png);
}

.link5 {
 background: url(https://standard.kuebrich.com/kuebrich-2016/wp-content/uploads/2017/08/RSG.png);
}

.kategorien li {
 padding-left: 10px;
 padding-right: 10px;
 font-size: 11px;
 display: inline-block;
}

.kategorien li a{
 display: block;
 color: white;
 padding-top: 50px;
 padding-right: 30px;
 padding-left: 30px;
 text-decoration: none;
}

.kategorien a:hover{
 color: #6bf;
}

＆＃13;

<ul class="entry-content kategorien">
<li><a class="link link1" href="#tueren">Türen</a></li>
<li><a class="link link2" href="#fenster">Fenster</a></li>
<li><a class="link link3" href="#schloss">Schloss</a></li>
<li><a class="link link4" href="#sitz">Sitz</a></li>
<li><a class="link link5" href="#rsg">RSG</a></li>
<li><a class="link link4" href="#sitz">Sitz</a></li>
<li><a class="link link2" href="#fenster">Fenster</a></li>
<li><a class="link link3" href="#schloss">Schloss</a></li>
<li><a class="link link4" href="#sitz">Sitz</a></li>
<li><a class="link link2" href="#fenster">Fenster</a></li>
</ul>

＆＃13;

如果我可以添加到此代码中以解决此问题或您需要更多信息，请告诉我。仅供参考：代码必须仅在css和html中完成。

Answer 1

试试这个css

@media (max-width: 980px) {
  .et_fixed_nav #top-header {
     position: fixed !important;
  }
}

Answer 2

@media all and(max-width: 980px) {
  .et_fixed_nav #top-header {
     position: fixed !important;
  }
#top-menu {
    display: block !important;
 }
}

这应该可以解决您的问题，但不是解决方案。

mobile：ul内容在滚动后消失

2 个答案: