モバイル：スクロール後にulのコンテンツが消える

私の会社のウェブサイトatmのナビゲーションバーで作業しています。基本的なものにはwordpressを使用していますが、ナビゲーションバーはcssとhtmlで手動でコード化する必要があります。ここにあなたは現在働いているサイトがあります： リンクが利用できません デスクトップではサイトはうまく動作しますが、モバイルでは少し問題があります。モバイル：スクロール後にulのコンテンツが消える

li要素の1つをクリックすると、サイトは特定の製品までスクロールします。モバイルブラウザでこれを行うには、自分でスクロールして別のli要素をクリックする必要があります。その後、ulの内容は消えますが、li要素はまだクリック可能です。再度スクロールすると要素が表示されます。

ここでナビゲーションバーのコードスニペットです：

.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; 
 
}

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

私はこの問題を解決するために、このコードに追加できるか、さらに情報が必要なものがある場合は私に知らせてください。 FYI：コードはcssとhtmlでのみ行う必要があります。

出典

2017-08-28 SeriousSimon

問題を再現できません。どのデバイスを使用していて、どのブラウザを使用しているのか教えてください。 – Huelfe

もちろん。私はSafariでiPhone 5s（iOS 10.3.1）を使用しています。 – SeriousSimon

これは良い解決策あなたの問題を解決しますが、ないはず

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

出典

2017-08-28 11:43:19 Ezzuddin

問題を解決しません。 – SeriousSimon

これを使用できます。 – Ezzuddin

FYI：トップ・メニュー/トップ・ヘッダーのスタイリングを行っていますが、それは私の問題の原因ではありません。これはカテゴリとコードスニペットで見ることができるナビゲーションバーにあります。 – SeriousSimon

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

このCSSを試してみてください。

出典

2017-08-28 12:00:53 Era

問題は解決しません。 FYI：あなたはトップ・メニュー/トップ・ヘッダーのスタイリングを行っていますが、それは私の問題の原因ではありません。これはカテゴリとコードスニペットで見ることができるナビゲーションバーにあります。 – SeriousSimon

@SeriousSimon：どこに私があなたに与えたCSSを入れていますか？私は私の答えを編集しました。今すぐご確認ください。 – Era

モバイル：スクロール後にulのコンテンツが消える

答えて