応答性のある水平スクロールナビゲーションバーに

Question

応答メニューに問題があります。私は画面の変更（レスポンス）で水平スクロールメニューを作成しようとしています。

このメニューは、PC画面（全幅）にどのように見えるかです：

このメニューは、モバイルデバイスの画面上でどのように見えるかです：

私はバーがそれらのスクロールバーなしで、右にスクロールする必要があります。これを行う方法はありますか？

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

モバイル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

使用

overflow-y: hidden 

代わり

overflow-y: hide 

の

とスクロールバーをstylizingためとして、あなたは以下のクラスを使用することができます。

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

詳細情報here

自動車用

Answer 2

使用完璧なスクロールスクロールバーとディスプレイを隠す：より良いエクスペリエンスのためにフレックス

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

は、私は小さなリファクタリング作る