Horizontal scrolling without displaying bar

Question

I want to display list of menu by scrolling horizontally. So I have written code as:

.sub-menu {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}

.menu.navbar-nav li{
    width: 22%;
    text-align: center;
    display:inline-block;
    vertical-align:top;
}

But it is showing a bar horizontally but I want to disappear it. Please see the .

Could you tell me someone how can I remove it.

HTML

<div class="mobile-menu temp-mobile-menu visible-xs">
<div class="sub-menu">
    <ul class="menu nav navbar-nav" id="">
        <li class="active"><a href="/bn" class="first leaf home active">Home</a></li>
        <li><a href="/bn/tonic-doctor" class="leaf doctor">Doctor</a></li>
        <li><a href="/bn/tonic-benefits" class="leaf benefits">Benefits</a></li>
        <li><a href="/bn/packages" class="leaf packages">Packages</a></li>
        <li><a href="/bn/health-topics" style="swiper-slide" class="last leaf স্বাস্থ্য-প্রসঙ্গ">স্বাস্থ্য প্রসঙ্গ</a></li>
    </ul>    
</div>
</div>

Updated CSS

.mobile-menu {
  overflow: hidden;
}
.sub-menu {
  min-height: 44px;
  white-space: nowrap;
  overflow-x: scroll;
}
.menu.navbar-nav li {
 width: 22%;
 text-align: center;
 display: inline-block;
 vertical-align: top;
}

Possible duplicate of [Hiding the scrollbar on an HTML page](http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) — Jamie Barker, Mar 06 '17 at 11:40
I would point you in particular to [this answer](http://stackoverflow.com/a/25561646/2117156) — Jamie Barker, Mar 06 '17 at 11:41

Koby Douek · Accepted Answer · 2017-03-06T11:23:22.520

2

overflow-x: scroll; means that your horizontal scroll bar is visible.

If you want to remove it, use overflow-x: hidden;

By the way, if you want both horizontal and vertical scrollers to be hidden, just use: overflow: hidden;

If you want to hide the scrollbar but keep scrolling capabilities, add a div with a CSS class called maindiv above your sub-menu element and use:

.maindiv{       
    overflow: hidden;
}

.sub-menu{
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    padding-bottom:20px;
}

edited Mar 06 '17 at 11:23

answered Mar 06 '17 at 10:46

Koby Douek

14,709
15
58
84

I want to hide bar keeping horizontal scrolling – StreetCoder Mar 06 '17 at 10:55
I have done as you said but it does not work. I have added the html in my question. – StreetCoder Mar 06 '17 at 11:15
See updated answer - try adding `padding-bottom:20px;` – Koby Douek Mar 06 '17 at 11:23
Also make sure you are refreshing the page properly and not from cache. – Koby Douek Mar 06 '17 at 11:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137332/discussion-between-streetcoder-and-koby-douek). – StreetCoder Mar 06 '17 at 11:30

Marco · Answer 2 · 2017-03-06T11:28:43.660

1

Try to change overflow-x: scroll; to overflow-x: hidden; in your .sub-menu class

EDIT: Add this class to CSS file:

::-webkit-scrollbar { 
width: 0px; /* remove scrollbar space */ 
background: transparent; /* optional: just make scrollbar invisible */ 
}

Working JSFiddle example

edited Mar 06 '17 at 11:28

answered Mar 06 '17 at 10:47

Marco

113
1
7

I want to hide bar keeping horizontal scrolling – StreetCoder Mar 06 '17 at 10:55
If you cannot solve with @Koby Douek answer, can you okease show also html code by updating your answer? – Marco Mar 06 '17 at 11:06
For Firefox there are moz-webkits and for Microsoft moz-webkits I thik – Marco Mar 06 '17 at 12:36

Horizontal scrolling without displaying bar

2 Answers2