How to do horizontal scroll bar in mobile view with this code-CodePudding

I want to horizontal scrollbar in mobile view with this code can anyone suggest how to do..

<ul  id="menutabs" style="width: 100%;">
  <li >
    <a  data-toggle="tab" href="#menu_0">
      <i  style="font-size:1rem;">star</i>
    </a>
  </li>
  <li >
    <a  data-toggle="tab" href="#menu_1">Master</a>
  </li>
  <li >
    <a  data-toggle="tab" href="#menu_2">Transaction</a>
  </li>
  <li >
    <a  data-toggle="tab" href="#menu_3">Reports</a>
  </li>
  <li >
    <a  data-toggle="tab" href="#menu_4">Analysis</a>
  </li>
  <li >
    <a  data-toggle="tab" href="#menu_6">Setup</a>
  </li>
</ul>

CodePudding user response：

In CSS, you can use overflow-x to add a scrollbar. You can then use overflow-x, and you can set it to

overflow-x: scroll;

overflow-x: auto;

Auto sets it up so it only adds a scrollbar if the site needs it, and scroll adds it all the time.

For example:

body {
  overflow-x: scroll; /* or use auto*/
}

<li >
            <a  data-toggle="tab" href="#menu_0">
                <i  style="font-size:1rem;">star</i>
            </a>
        </li>
                    <li >
                        <a  data-toggle="tab" href="#menu_1">Master</a>
                    </li>
                    <li >
                        <a  data-toggle="tab" href="#menu_2">Transaction</a>
                    </li>
                    <li >
                        <a  data-toggle="tab" href="#menu_3">Reports</a>
                    </li>
                    <li >
                        <a  data-toggle="tab" href="#menu_4">Analysis</a>
                    </li>
                    <li >
                        <a  data-toggle="tab" href="#menu_6">Setup</a>
                    </li>

    </ul>

CodePudding user response：

Set overflow-x to scroll, like: overflow-x:scroll;

CodePudding user response：

Add this on mobile view its give you horizontal scroll. for beautify scroll you can add the webkit-scrollbar style

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