From 9d1e4d0881ad7f16d5e07bffa240b7547150e595 Mon Sep 17 00:00:00 2001 From: sunwoo-j Date: Thu, 23 May 2024 23:11:04 +0900 Subject: [PATCH] Made topbar sticky --- _sass/addon/commons.scss | 8 ++++++-- _sass/colors/typography-dark.scss | 2 +- _sass/colors/typography-light.scss | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e012c253c11..dc5a23ab57d 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -898,8 +898,12 @@ $btn-mb: 0.5rem; /* --- top-bar --- */ #topbar-wrapper { - height: $topbar-height; - background-color: var(--topbar-bg); + position: -webkit-sticky; /* For Safari */ + position: sticky; + top: 0; + z-index: 1000; /* Ensures it stays above other elements */ + height: $topbar-height; /* Existing height */ + background-color: var(--topbar-bg); /* Existing background color */ } #topbar { diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss index 382d5ce0288..1cda1cc28a7 100644 --- a/_sass/colors/typography-dark.scss +++ b/_sass/colors/typography-dark.scss @@ -47,7 +47,7 @@ --avatar-border-color: rgb(206, 206, 206, 0.9); /* Topbar */ - --topbar-bg: rgb(27, 27, 30, 0.64); + --topbar-bg: rgb(27, 27, 30); --topbar-text-color: var(--text-color); --search-border-color: rgb(55, 55, 55); --search-icon-color: rgb(100, 102, 105); diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss index 11f052cf09d..9e6984e07de 100644 --- a/_sass/colors/typography-light.scss +++ b/_sass/colors/typography-light.scss @@ -50,7 +50,7 @@ --avatar-border-color: white; /* Topbar */ - --topbar-bg: rgb(255, 255, 255, 0.7); + --topbar-bg: rgb(255, 255, 255); --topbar-text-color: rgb(78, 78, 78); --search-border-color: rgb(240, 240, 240); --search-icon-color: #c2c6cc;