view the image of the scroll here
The flex-wrap property specifies that flexible items should wrap instead of going to the next line, causing horizontal scrolling on mobile devices. The webkit-scrollbar is used to enhance the appearance of the scroll on mobile devices, and this styling only applies to the mobile view.
@media (max-width: 767px) {
ul#menutabs {
display: flex !important;
overflow-x: scroll;
overflow-y: hidden;
align-items: center;
flex-wrap: nowrap;
}
ul#menutabs::-webkit-scrollbar {
width: 5px;
height: 2px !important;
}
ul#menutabs::-webkit-scrollbar-thumb {
background-color: #78909c;
}
ul#menutabs::-webkit-scrollbar-track {
background-color:#3333334f;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<linK href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="nav nav-tabs nav-justified" id="menutabs" style="width: 100%;">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu_0">
<i class="material-icons" style="font-size:1rem;">star</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu_1">Master</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu_2">Transaction</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu_3">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu_4">Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu_6">Setup</a>
</li>
</ul>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
To enable horizontal scrolling on mobile view, add the following CSS code. To customize the scroll, you can use webkit-scrollbar styles.
@media (max-width: 767px) {
ul#menutabs {
display: flex !important;
overflow-x: scroll;
overflow-y: hidden;
align-items: center;
flex-wrap: nowrap;
}
ul#menutabs::-webkit-scrollbar {
width: 5px;
height: 2px !important;
}
ul#menutabs::-webkit-scrollbar-thumb {
background-color: #78909c;
}
ul#menutabs::-webkit-scrollbar-track {
background-color:#3333334f;
}
}