To responsive horizontal, scrolling navigation bar

Question

I'm having trouble with responsive menu. I'm trying to create horizontal scrolling menu on screen change (responsive).

This is how menu looks on pc screen (full width):

This is how menu looks on mobile device screen:

I need the bar to scroll right, without those Scrollbars. Is there a way to do this?

<div class="menu">
    <nav class="infobar">
        <div class="container">
            <ul class="nav navbar-left">
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
            </ul>
        </div>
    </nav>
</div>

MAIN CSS

.infobar {
 width: 100%;
 background: #f7f7f7;
 height: 80px;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
border-radius: 0;

.col-min {
    min-width: 10px;
    height: 80px;
    background: none;
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
    position: relative;
    margin-left: -1px;
    top: -1px;
    left: 1px;
    float: left;
}

MOBILE CSS

.infobar {
    min-width:100%;
    overflow-x:scroll;
    overflow-y:hide;    
}

.menu .nav {
    margin-left: -5px;
    min-width: 100%;
}

https://jsfiddle.net/94f1d5v5/

https://jsfiddle.net/94f1d5v5/1/

Answer 1

Use perfect-scroll for auto-hiding scrollbar and display: flex for better experience.

.nav {
   display: flex;
   padding: 24px
}  

I make small refactoring playcode.io/8

Answer 2

use

overflow-y: hidden

instead of

overflow-y: hide

and as for stylizing the scrollbars, you can use the following classes:

::-webkit-scrollbar              {}
::-webkit-scrollbar-button       {}
::-webkit-scrollbar-track        {}
::-webkit-scrollbar-track-piece  {}
::-webkit-scrollbar-thumb        {}
::-webkit-scrollbar-corner       {}
::-webkit-resizer                {}

More info here