From e7aaebf80298cd3e20bd478555558428aa985aba Mon Sep 17 00:00:00 2001 From: Adnan Hashmi Date: Sun, 2 Oct 2022 16:08:33 +0530 Subject: [PATCH 1/3] fix: stack navbar on top so that the banner doesn't cover the navbar. --- .../src/theme/Navbar/Layout/index.tsx | 1 + .../src/theme/Navbar/Layout/styles.module.css | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx index b957573e8cc9..a8f46505bce1 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx @@ -39,6 +39,7 @@ export default function NavbarLayout({children}: Props): JSX.Element { className={clsx( 'navbar', 'navbar--fixed-top', + styles.stackNavbarOnTop, hideOnScroll && [ styles.navbarHideable, !isNavbarVisible && styles.navbarHidden, diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css index 8258c17f2cfd..ac195390cb33 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css @@ -12,3 +12,7 @@ .navbarHidden { transform: translate3d(0, calc(-100% - 2px), 0); } + +.stackNavbarOnTop { + z-index: calc(var(--ifm-z-index-fixed) + 1); +} From a84133d6b5cc5d69b33b54cda437d63a6d8ffc12 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 6 Oct 2022 14:58:23 +0200 Subject: [PATCH 2/3] Revert "fix: stack navbar on top so that the banner doesn't cover the navbar." This reverts commit e7aaebf80298cd3e20bd478555558428aa985aba. --- .../src/theme/Navbar/Layout/index.tsx | 1 - .../src/theme/Navbar/Layout/styles.module.css | 4 ---- 2 files changed, 5 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx index a8f46505bce1..b957573e8cc9 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx @@ -39,7 +39,6 @@ export default function NavbarLayout({children}: Props): JSX.Element { className={clsx( 'navbar', 'navbar--fixed-top', - styles.stackNavbarOnTop, hideOnScroll && [ styles.navbarHideable, !isNavbarVisible && styles.navbarHidden, diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css index ac195390cb33..8258c17f2cfd 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css @@ -12,7 +12,3 @@ .navbarHidden { transform: translate3d(0, calc(-100% - 2px), 0); } - -.stackNavbarOnTop { - z-index: calc(var(--ifm-z-index-fixed) + 1); -} From 1a2039eb8f0ea9ec6a5a5f5b76ee261d8628d213 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 6 Oct 2022 15:01:53 +0200 Subject: [PATCH 3/3] revert z-index/shadow change from https://github.com/facebook/docusaurus/pull/7940 see https://github.com/facebookincubator/infima/issues/275 --- .../src/theme/AnnouncementBar/styles.module.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css index f81f61ea8770..b09a21721ff7 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css @@ -15,8 +15,16 @@ height: var(--docusaurus-announcement-bar-height); background-color: var(--ifm-color-white); color: var(--ifm-color-black); + + /* + Unfortunately we can't make announcement bar render above the navbar + IE need to use border-bottom instead of shadow + See https://github.com/facebookincubator/infima/issues/275 + box-shadow: var(--ifm-global-shadow-lw); - z-index: calc(var(--ifm-z-index-fixed) + 1); /* just above the navbar */ + z-index: calc(var(--ifm-z-index-fixed) + 1); + */ + border-bottom: 1px solid var(--ifm-color-emphasis-100); } html[data-announcement-bar-initially-dismissed='true'] .announcementBar {