mobile: le contenu ul disparaît après le défilement

Question

Je travaille sur une barre de navigation pour le site Web de mon entreprise atm. Nous utilisons wordpress pour les éléments de base, la barre de navigation doit être codée manuellement en css et html. Vous avez actuellement le site en cours de création: lien non disponible Sur le bureau le site fonctionne très bien, mais sur mobile nous avons eu un petit problème.

Lorsque vous cliquez sur l'un des li-éléments, le site défile jusqu'au produit spécifique. Faire cela sur un navigateur mobile fonctionne jusqu'à ce que vous faites défiler vous-même et cliquez sur un autre li-élément. Alors le contenu du ul disparaîtra mais les li-elements sont toujours cliquables. Défiler à nouveau permettra aux éléments d'apparaître.

est ici l'extrait de code de la barre de navigation:

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

S'il vous plaît laissez-moi savoir s'il y a quelque chose que je peux ajouter à ce code pour résoudre ce problème ou vous avez besoin de plus amples informations. FYI: Le code doit être fait en css et html seulement.

Answer 1

Essayez cette 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; 
} 
} 

Cela devrait résoudre votre problème, mais pas une bonne solution.