Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


We've received requests from our users to make the course page navigation easier. We currently have an in-page navigation located in the first column of the page just below the hero image. However, we would like to make sure that the ease to navigate through the page continues all the way to the bottom of the page as well. With that said, we are looking to float the in-page navigation as user scrolls through.  This will allow users to see which section they are currently on and can navigate between sections via the floating navigation. An example to the in-page navigation is StickSticky, Smooth, Active Nav

This discovery page includes the requirements from all course page stakeholders. 


These solutions mainly focus on the behaviour of the large breakpoint. It may be beneficial to investigate in A different approach to sticky in-page navigation on small devices when we consider developing a similar in-page navigation on the small breakpoint.

It is likely that the implementation of the floating in-page navigation will have a significant impact on our components and page appearance. These should be clearer as implement it. 


Reference from GOV.UK, 2018, Sticky elements: functionality and accessibility testing, main issue with accessibility is the sticky header overlapped some content on the page and navigating backwards through elements often left the focused element obscured by the sticky element. As a result, I recommend that we have a thorough manual accessibility testing once the floating in-page navigation was implemented.