From 9740b1bb62ed0422a8336d34420418431f6c4f1d Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Sat, 13 Feb 2021 16:01:55 +0200 Subject: [PATCH] fix(docs-infra): fix sidenav top position on narrow screens (#40802) On larger screens the top-bar has a height of 64px. On screens smaller than 600px, the top-bar has a height of 56px. As a result, the sidenav should have a top position of 56px on screens smaller than 600px and 64px on other screens. Previously, the style setting the top position to 56px was tied to the presence of the `.collapsed` class, which depends on whether the sidenav is docked or not. The change from docked to collapsed sidenav, however, happens at 992px. As a result, the sidenav had an incorrect top position (56px instead of 64px) on screens between 600px and 991px. This commit fixes this by ensuring the change of the top position for the sidenav happens at 600px. PR Close #40802 --- aio/src/styles/1-layouts/_sidenav.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss index 5ecdde466c..d524b6129c 100644 --- a/aio/src/styles/1-layouts/_sidenav.scss +++ b/aio/src/styles/1-layouts/_sidenav.scss @@ -28,7 +28,7 @@ mat-sidenav-container.sidenav-container { background-color: $superlightgray; border-right: 1px solid $lightgray; - &.collapsed { + @media (max-width: 599px) { top: 56px; }