Responsive scroll-able tabbed navigation in CSS

Question

I am looking to implement the nav bar as shown below. there two versions, the first is full screen and second is mobile. The mobile has scrolling to the left and right for the days of the week. What is this called so i can look up examples or better again does anyone know how i would go about implementing this.

I have only shown the nav bar below but i guess it is actually more of a tabbed control as it will just display different divs depending on which day of the week is clicked

thank you

Answer 1

Updated to include both Bootstrap navbar and jQueryUI tabs implementation (per comment)

There's going to be some work you need to achieve the exact same style you are depicting above, but the example below will achieve the functionality desired. The example now shows a basic Bootstrap and jQuery implementation.

Bootstrap already has tabs for navigation (http://getbootstrap.com/components/#nav-tabs). jQueryUI has tabs as well (http://jqueryui.com/tabs/). Out of the box, both frameworks float tabs left and wrap to a new line, so you can just override the values (like below). The are identical solutions with different selectors.

Here's the plunk (http://plnkr.co/edit/nh4GsiSsbE6UQ0xVzF0G?p=preview)

Run the sample and resize the result pane to see the effect

Bootstrap CSS

.nav-tabs {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.nav-tabs > li {
  float: none;
  display: inline-block;
}

jQueryUI CSS

.ui-tabs-nav {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.ui-tabs .ui-tabs-nav li {
  float: none;
  display: inline-block;
}

In order to achieve the style you want, you'll need to customize the nav elements like .nav-tab > li and probably .nav-tab > li.active for Bootstrap. jQueryUI would be similar, just different selectors.

To customize the scrollbar, you'll want to do a little more research on custom scrollbars. Here's a good discussion about how to do it with WebKit: http://css-tricks.com/custom-scrollbars-in-webkit/ You'll most likely want to find a nice cross-browser solution to this though.