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
This commit is contained in:
parent
7944ee2c30
commit
27bb6f6a04
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue