Skip to content

Commit 608f307

Browse files
committed
Fix the tall menu problem
- if the height of the contents list exceeds the height of the viewport users can't see the whole contents unless they scroll to the bottom of the page, where the sticky element hits the bottom and stops - to fix this, we apply a max height of the viewport and an overflow y scroll, so that the element never exceeds the height of the viewport and can be scrolled - also adding a bottom margin to prevent collision with the back to top link at the bottom
1 parent 8ce0d0f commit 608f307

File tree

1 file changed

+3
-0
lines changed

1 file changed

+3
-0
lines changed

app/assets/stylesheets/views/_html-publication.scss

+3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
@include govuk-media-query($from: desktop) {
2626
position: sticky;
2727
top: govuk-spacing(2);
28+
max-height: 100vh;
29+
overflow-y: auto;
30+
margin-bottom: govuk-spacing(4);
2831
}
2932

3033
.direction-rtl & {

0 commit comments

Comments
 (0)