Sticky nav

The sticky nav is only used for linking within a page to in-page content. It appears below the normal navigation bar and affixes to the top of the browser window as you scroll down past it. The sticky nav also highlights the current section as you scroll down the page.

Rules for the sticky nav

  • Must add the CSS position: relative; to the body for section highlighting to work.
  • Must only be used on long pages where there is a need to provide a quick means of navigating between sections.
  • Must come below the page intro so that it is clear it is secondary navigation only related to the page content.
  • Must not contain any dropdown menus.
  • Must only contain links to in-page content.
  • Must not display on more than one row.

Options available


Sticky nav

Example

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere.

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Visiting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

News

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Contact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Code

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere.

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Visiting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

News

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.

Contact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.


Old style - deprecated

This option is no longer supported

This old method of implementation is deprecated and will be removed in a future version of the digital pattern library.

See the code below for the old sticky nav markup. Do not use this HTML in new sites.

Example
Code