Kako napraviti da se horizontalni menu scrolla? Ovo je kod koji imam, ali nikako ne uspijevam da mi se na tabletu i mobilnom uređaju horizontalno scrollaju linkovi u meniju.
<div class="menu-tags">
<ul class="mod-menu mod-list nav ">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
A gdje ti je css? Trik ti je overflow:auto; i whitespace:no-wrap;
Evo pogledaj ovaj video, pomoci ce ti sigurno samo prati pazljivo…
Zahvaljujem. Riješeno.
Problem je bio s flex containerom.
.menu-tags { position: relative; overflow: hidden; border-bottom: 1px solid #e1e1e1; padding-bottom: 1rem; margin-bottom: 1rem; overflow-x: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ }
.menu-tags::-webkit-scrollbar { /* WebKit */ width: 0; height: 0; }
.menu-tags ul { padding: 0rem 0rem 0rem 0rem; }
.menu-tags .nav { display: flex; flex-wrap: nowrap; }
.menu-tags ul li { display: inline; white-space: nowrap; }