Responsive Nav Bar

In-page tabbed content

This is based on the standard Bootstrap tabbed content system, where only the active tab content is displayed in the page.

The second demo in this section shows the 'auto centering' functionality

Auto-centering

As above but with responsive-nav-bar--centering modifier class

Nav-bar will try to move the active link towards the center.

In-page scroll content

This layout combines the 'sticky' nav-bar with scroll-watching so the tabs scroll you to the target content in the page. It also auto-updates as you scroll manually. All the content is displayed in the page all the time.

Demo Content A

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. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla. Aliquam quis venenatis metus. Nullam leo elit, sodales vel purus et, maximus aliquam dolor. Integer laoreet sapien ante, ut porta dui aliquam id. Phasellus egestas quis magna ut ullamcorper. Nam lobortis tempus bibendum. Pellentesque condimentum accumsan leo, sed elementum magna posuere vitae. Curabitur facilisis velit ut libero mattis, eu eleifend elit mollis. Quisque vel consectetur nunc.

Quisque rutrum enim pharetra magna tristique, convallis accumsan nisl iaculis. Sed erat enim, viverra in tincidunt vel, ultricies ac ligula. Ut varius dapibus aliquet. Donec euismod tristique augue, et mollis mauris fermentum a. Maecenas venenatis consequat dolor eu aliquam. Proin nisi nulla, suscipit at enim a, varius bibendum magna. Maecenas ut volutpat metus. Fusce nec malesuada tellus, vitae bibendum erat. Duis vestibulum vitae dolor a ultricies. Mauris mauris est, dignissim ut leo eu, pulvinar sodales lacuser.

Suspendisse id lacinia turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque convallis lectus vel urna placerat, sit amet hendrerit turpis mattis. Aliquam quis efficitur tortor. Fusce bibendum tristique mollis. Integer vel suscipit mauris. Proin semper lobortis augue, a dapibus ex posuere et. Quisque porttitor lacus et mauris ultricies efficitur. Maecenas ac rhoncus diam. Ut vitae nisl blandit, facilisis purus et, finibus est. Nunc ut bibendum orci. Ut sit amet tortor aliquam, pellentesque metus a, facilisis odio. Curabitur iaculis condimentum efficitur.

Donec quis augue eget dolor rhoncus maximus. Sed id nibh convallis, sodales orci at, maximus turpis. Nulla neque dolor, vestibulum eu pulvinar non, vulputate in ex. Phasellus bibendum maximus ipsum at venenatis. Donec massa ipsum, dignissim vel lectus vitae, commodo facilisis ipsum. Orci natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In accumsan semper orci pharetra tempus. Aenean rhoncus metus dui, a faucibus libero rhoncus vitae. Nulla facilisi. Mauris et accumsan felis, eget tincidunt risus.

Maecenas libero est, tempus a lorem in, ornare pulvinar elit. In lacinia commodo vestibulum. Donec pellentesque condimentum commodo. Maecenas facilisis, erat quis tempus bibendum, urna ante semper ex, sit amet cursus felis metus et libero. Praesent consectetur, erat ullamcorper tincidunt auctor, magna nunc lacinia ligula, nec tempor turpis dui eget arcu. Pellentesque risus est, convallis at ipsum id, vestibulum rutrum ipsum. Pellentesque nec erat in eros varius tempor vitae accumsan ante. Fusce elementum ullamcorper sollicitudin. Etiam sem augue, aliquet at consectetur quis, molestie at augue. Cras maximus ligula at tortor bibendum lacinia. Vivamus ut leo a erat vestibulum ultricies id et magna. Phasellus gravida aliquam eros fermentum pulvinar. Maecenas interdum volutpat lectus, sit amet porttitor urna consectetur sed. Maecenas vitae ligula a purus auctor faucibus et ac massa. Quisque ultricies ultrices nisi non dignissim.

Demo Content B

Demo Content C

Links to other pages

These tabs all link to other urls, causing a new web page to load.

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.

Responsive Nav Bar

In-page tabbed content

This is the 'January' content

This is the 'February' content

This is the 'March' content

This is the 'April' content

This is the 'May' content

This is the 'June' content

This is the 'July' content

This is the 'August' content

This is the 'September' content

This is the 'October' content

This is the 'November' content

This is the 'December' content