Horizontal Tab based menu with scrolling tabs

Question

I have a simple Horizontal Menu more like tabs.. I want it to work like a BBC app tab menu, So that when menu has more items it will allow horizontal scrolling in both directio

Answer 1

A simple solution:

give the .tab-nav-wrapper a fixed height which should be the height of the li items (navigation items) and hide elements that overflow (here we want to hide the scrollbar):

.tab-nav-wrapper {
  overflow: hidden; // magic is here
  height: 48px; // magic is here
}

Then make the ul scrollable (only x direction) and prevent the li elements from breaking to a new line:

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  z-index: 100;
  background-color: #ccc;
  white-space: nowrap; // magic is here
  overflow-x: scroll; // magic is here
}

That's all :). No javascript required to make it work: http://codepen.io/anon/pen/RarPxp