Responsive Nav Bar

A tabs-like interface with horizontal scrolling (with nudge arrows) when required.

There are two code variations:

You can also add the responsive-nav-bar--sticky class to make the bar 'position: sticky' in the page.

In-page content tabs

This is the 'January' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'February' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'March' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'April' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'May' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'June' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'July' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'August' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'September' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'October' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'November' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

This is the 'December' content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.

Individual page links

This is the page content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue.

Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa. Maecenas fermentum nibh id tristique pharetra.