From 27bb6f6a04740db57ffad9b17efec236ee0778d1 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Tue, 9 Mar 2021 14:15:15 +0200 Subject: [PATCH] fix(docs-infra): use a fixed top-menu on marketing pages as well (#41051) Previously, in contrast to docs pages, marketing pages had a non-fixed top-menu, which meant that the top-menu would scroll out of the viewport along with the rest of the content. This had a couple of downsides: - The UI was different between pages (i.e. different top-menu behavior on docs vs marketing pages). - Since some of the marketing pages are long, it was not easy for people to navigate to a different page (i.e. they had to scroll all the way back up). This commit improves the UX by using the same, fixed top-menu on all pages, which restores consistency and allows the user to navigate around more easily. NOTE: The old behavior (non-fixed top-menu) is kept on the homepage, since its top-menu design in a little different than other pages (e.g. it uses a transparent top-menu) and would not play well with a fixed top-menu. PR Close #41051 --- aio/src/styles/1-layouts/_top-menu.scss | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index bac713baaa..d6393b528a 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -20,21 +20,13 @@ mat-toolbar.app-toolbar { @media (min-width: 481px) { &:not(.transitioning) { background-color: transparent; + box-shadow: none; + position: absolute; transition: background-color 0.2s linear; } } } - // MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER - @include marketing-pages($nestParentSelector: true) { - box-shadow: none; - - // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE - @media (min-width: 481px) { - position: absolute; - } - } - // DOCS PAGES OVERRIDE: HAMBURGER @include docs-pages($nestParentSelector: true) { @media (min-width: $showTopMenuWidth) {