You need to implement horizontal scrolling for mobile devices, like Google’s:

enter image description here

Using scripts if necessary.

Sample code:

@import url(https://fonts.googleapis.com/css?family=Raleway:300); * { box-sizing: border-box; margin: 0; } a { text-decoration: none; } body { background: #CFD8DC; } .container { width: 320px; position: absolute; margin: calc(50vh - 240px) 0 0 calc(50% - 160px); background: #1565C0; box-shadow: 0 2px 12px rgba(0,0,0,0.3); height: 480px; border-radius: 3px; overflow: hidden; } header, nav { background: #f9f9f9; } header { height: 40px; box-shadow: 0 1px 7px rgba(0,0,0,0.3); z-index: 1; position: relative; } header h1 { margin: 0; padding-left: 20px; font: 24px/40px 'Raleway', sans-serif; } nav ul { height: 30px; -webkit-user-select: none; } nav ul li { display: inline-block; width: 30%; text-align: center; } nav ul li a { font: 18px/30px 'Raleway', sans-serif; color: #aae; } 
 <body> <div class="container"> <header> <h1>Site Title</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </body>

  • Apparently you dig in the direction of "Dragging jQuery Mobile" - Jean-Claude

1 answer 1

Added .scroller to html :

 <div class="container"> <header> <h1>Site Title</h1> </header> <nav> <div class="scroller"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </div>

And added to the css bit:

 nav { width: 100%; height: 30px; overflow: hidden; } nav .scroller { width: 100%; height: 60px; overflow: auto; } nav ul { height: 30px; -webkit-user-select: none; white-space: nowrap; }

In nav. .scroller height with a reserve just in case that the scroll bar is not displayed.

https://jsfiddle.net/skywave/175k4yyx/